jQuery सबमिट करने वाला फॉर्म दो बार

Question

मुझे पता है कि इस प्रश्न का उत्तर कुछ सौ बार दिया गया है, लेकिन मैंने संभावित सोल्यूटन के भार से भाग लिया है, लेकिन उनमें से कोई भी मेरे उदाहरण में काम नहीं कर रहा है।

नीचे फ़ॉर्म सबमिट करने के लिए मेरा फॉर्म और कोड है। यह एक PHP स्क्रिप्ट के लिए आग लगती है। अब मुझे पता है कि स्क्रिप्ट स्वयं सबमिट का कारण नहीं है, क्योंकि मैंने मैन्युअल रूप से फॉर्म की कोशिश की है और यह केवल एक बार सबमिट करता है।

jQuery कोड का पहला भाग एक लाइटबॉक्स खोलने और नीचे तालिका से मूल्य खींचने से संबंधित है, मैंने इसे किसी भी संभावित समस्या के मामले में शामिल किया है।

jQuery कोड:

$(document).ready(function(){ 
    $('.form_error').hide(); 
    $('a.launch-1').click(function() { 
     var launcher = $(this).attr('id'), 
      launcher = launcher.split('_'); 
     launcher, launcher[1], $('td .'+launcher[1]); 
     $('.'+launcher[1]).each(function(){ 
      var field = $(this).attr('data-name'), 
       fieldValue = $(this).html(); 
      if(field === 'InvoiceID'){ 
       $("#previouspaymentsload").load("functions/invoicing_payments_received.php?invoice="+fieldValue, null, function() { 
        $("#previouspaymentsloader").hide(); 
       }); 
      } else if(field === 'InvoiceNumber'){ 
       $("#addinvoicenum").html(fieldValue); 
      } 
      $('#'+field).val(fieldValue); 
     }); 
    }); 
    $("#addpayment_submit").click(function(event) {   
     $('.form_error').hide(); 
     var amount = $("input#amount").val(); 
     if (amount == "") { 
      $("#amount_error").show(); 
      $("input#amount").focus(); 
      return false; 
     } 
     date = $("input#date").val(); 
     if (date == "") { 
      $("#date_error").show(); 
      $("input#date").focus(); 
      return false; 
     } 
     credit = $("input#credit").val(); 
     invoiceID = $("input#InvoiceID").val(); 
     by = $("input#by").val(); 
     dataString = 'amount='+ amount + '&date=' + date + '&credit=' + credit + '&InvoiceID=' + invoiceID + '&by=' + by; 
     $.ajax({ 
      type: "POST", 
      url: "functions/invoicing_payments_make.php", 
      data: dataString, 
      success: function(result) { 
       if(result == 1){      
        $('#payment_window_message_success').fadeIn(300); 
        $('#payment_window_message_success').delay(5000).fadeOut(700); 
        return false; 
       } else { 
        $('#payment_window_message_error_mes').html(result); 
        $('#payment_window_message_error').fadeIn(300); 
        $('#payment_window_message_error').delay(5000).fadeOut(700); 
        return false; 
       } 
      }, 
      error: function() { 
       $('#payment_window_message_error_mes').html("An error occured, form was not submitted"); 
       $('#payment_window_message_error').fadeIn(300); 
       $('#payment_window_message_error').delay(5000).fadeOut(700); 
      } 
     }); 
     return false; 
    }); 
}); 

यहाँ एचटीएमएल रूप है:

<div id="makepayment_form"> 
    <form name="payment" id="payment" class="halfboxform"> 
    <input type="hidden" name="InvoiceID" id="InvoiceID" /> 
    <input type="hidden" name="by" id="by" value="<?php echo $userInfo_ID; ?>" /> 
    <fieldset> 
     <label for="amount" class="label">Amount:</label> 
     <input type="text" id="amount" name="amount" value="0.00" /> 
     <p class="form_error clearb red input" id="amount_error">This field is required.</p> 
     <label for="credit" class="label">Credit:</label> 
     <input type="text" id="credit" name="credit" /> 
     <label for="amount" class="label">Date:</label> 
     <input type="text" id="date" name="date" /> 
     <p class="form_error clearb red input" id="date_error">This field is required.</p> 
    </fieldset> 
    <input type="submit" class="submit" value="Add Payment" id="addpayment_submit"> 
    </form> 
</div> 

आशा किसी को अपने ड्राइविंग मुझे पागल के रूप में कर सकते हैं। धन्यवाद।

Answer 1

अपने क्लिक फ़ंक्शन के नीचे, ईवेंट में preventDefault() जोड़ें।

$("#addpayment_submit").click(function(event) { 
    event.preventDefault(); 
    // Code here 
    return false; 
}); 

यह आपकी समस्या का समाधान कर सकता है। preventDeafult() डिफ़ॉल्ट ईवेंट को ट्रिगर करने से रोकता है। इस मामले में, जब आपका क्लिक क्लिक किया जाता है तो आपका फॉर्म ट्रिगर होता है, फिर जब आप इसे अपने AJAX फ़ंक्शन का उपयोग करके भेजते हैं तो फिर से ट्रिगर करते हैं।

यह क्लिक फ़ंक्शन के अंत में return false; जोड़ने में भी मदद करता है (ऊपर देखें)।

Answer 2

जैसा कि आप सर्वर पर डेटा भेजने के लिए AJAX अनुरोध का उपयोग कर रहे हैं, form टैग और <input type="submit" .../> का उपयोग करने के लिए कोई कारण नहीं है (आप इसके बजाय सरल बटन का उपयोग कर सकते हैं)। मुझे लगता है कि Cumbo के जवाब काम करना चाहिए। यदि ऐसा नहीं है तो आप event.stopPropagation() भी आजमा सकते हैं।

Answer 3

इसके अलावा, आप सबमिट बटन 'क्लिक' पर कार्रवाई बाध्य कर रहे हैं। लेकिन, यदि उपयोगकर्ता टेक्स्ट फ़ील्ड में टाइप करते समय 'एंटर' दबाता है और डिफ़ॉल्ट फॉर्म एक्शन ट्रिगर करता है तो क्या होगा? आपका काम नहीं चलेगा।

मैं इस बदल जाएगा:

$("#addpayment_submit").click(function(event) { 
    event.preventDefault(); 
    //code 
} 

इस के लिए

:

$("#payment").bind('submit', function(event) { 
    event.preventDefault(); 
    //code 
} 

अब यह कैसे उपयोगकर्ता प्रपत्र सबमिट कोई फर्क नहीं पड़ता, क्योंकि आप नहीं यह कब्जा करने के लिए जा रहे हैं बात क्या है।

Answer 4

दुर्भाग्यवश फ़ॉर्म को दो बार सबमिट करने के बाद मैंने स्क्रिप्ट को @ user2247104 की सिफारिशों पर बदल दिया।

हालांकि @Cumbo, @Barmar सही रास्ते पर भी थे, सिवाय इसके कि यह काम करने के लिए प्राप्त करने के लिए

event.preventDefault();

स्क्रिप्ट के तल पर रखा जाना आवश्यक:

}); 
event.preventDefault(); 
return false; 

उनकी मदद के लिए सभी को धन्यवाद :)

Answer 5

कुछ बार आपको घटना को संभालने के लिए केवल डिफ़ॉल्ट व्यवहार को रोकने की ज़रूरत नहीं है, बल्कि निष्पादन को रोकने के लिए भी घटना हैंडलरों की किसी भी डाउनस्ट्रीम श्रृंखला का उपयोग करना। यह event.preventDefault() के अतिरिक्त event.stopImmediatePropagation() पर कॉल करके किया जा सकता है।

उदाहरण कोड:

$("#addpayment_submit").on('submit', function(event) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
}); 

Answer 6

निम्नलिखित लाइनों जोड़ने का प्रयास करें।

event.preventDefault(); 
event.stopImmediatePropagation(); 

यह मेरे लिए काम करता है।