103

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

क्या "डिफ़ॉल्ट को रोकने" का एक तरीका है, फिर कुछ बिंदु बाद में "डिफ़ॉल्ट रूप से जारी है?"

javascript jquery

— StackOverflowNewbie
स्रोत

@FelixKling का मतलब क्या आपका मतलब है stackoverflow.com/questions/7610871/… ?

— एम। मिम्पेन

53

उपयोग jQuery.one()

तत्वों के लिए एक घटना के लिए एक हैंडलर संलग्न करें। हैंडलर को प्रति घटना प्रकार के अनुसार एक बार प्रति तत्व निष्पादित किया जाता है

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

oneरोकथाम का उपयोग अनंत लूप भी करता है क्योंकि यह कस्टम submitघटना पहले सबमिट के बाद अलग हो जाती है।

— ऑरेल
स्रोत

2

यह फिर से क्लिक करने के बाद सबमिट करेगा :(

— जिज्ञासा

संभवतः आप अनंत लूप के साथ सामना करेंगे

— मेहरदाद होसिननेजाद

अनंत लूप, फ़ंक्शन होना चाहिए। एक नहीं। कोई नहीं

— sgvolpe

52

जब आप .submit()ईवेंट को फ़ॉर्म में बाँधते हैं , और आप उन चीज़ों को करते हैं जो आप लौटने से पहले (सच) करना चाहते हैं, तो ये चीजें वास्तविक सबमिशन से पहले होती हैं।

उदाहरण के लिए:

$('form').submit(function(){
    alert('I do something before the actual submission');
    return true;
});

सरल उदाहरण है

Jquery.com पर एक और उदाहरण: http://api.jquery.com/submit/#entry-examples

— रॉन वैन डेर हाइजेन
स्रोत

2

क्या आप कह रहे हैं कि फॉर्म "रिटर्न ट्रू" से पहले सभी कोड तक जमा नहीं होगा; कथन निष्पादित किया जाता है?

— developarvin

2

हाँ, वही है जो सबमिट () फ़ंक्शन करता है।

— रॉन वैन डेर हाइजेन

8

यह एक अच्छा उदाहरण नहीं है क्योंकि यह सिंक्रोनस है। क्या होगा यदि मुझे जो सामान करने की आवश्यकता है वह async कॉल है? तो मामला "सबमिट सबमिट पर क्लिक करें -> एसिंक्स सामान करें और न ही 'फॉर्म सबमिट करें -> एसिंक्स कॉलबैक में फॉर्म में कुछ फ़ील्ड भरें -> कॉलबैक से फॉर्म सबमिट करें"

— गॉडफादर

1

कुछ async jQuery कोड चलाने के बारे में क्या है ?! काम भी करेगा?

— कैंडलजैक

यह मेरे लिए बहुत अच्छा काम करता है। मैं इसे सबमिट करने से पहले चीजों को नियंत्रित करने के लिए उपयोग करता हूं और यदि चीजें सही नहीं हैं, तो मैं "रिटर्न झूठे" का उपयोग करता हूं। मैंने एक दिन के लिए इस समाधान की तलाश की है। बहुत बहुत धन्यवाद।

— livefreeor

26

मैं बस करूँगा:

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do your stuff.
     $('#formId').submit();
 });

preventDefaultपहले कॉल करें और submit()बाद में फ़ंक्शन का उपयोग करें , यदि आपको केवल फॉर्म सबमिट करने की आवश्यकता है

— bipen
स्रोत

अपने क्लिक इवेंट हैंडलर के अंदर तर्क को शामिल न करें। इसे दूसरों को सौंप दें।

— रॉय नमिर

27

यह सुनिश्चित करता है कि बटन पर क्लिक किया जाएगा। क्या होगा अगर उपयोगकर्ता फॉर्म के भीतर से "एंटर" बटन दबाता है? वह भी फॉर्म जमा करेगा। इसलिए, सबमिट किए गए बटन पर क्लिक करना संभव नहीं है।

— StackOverflowNewbie

मैं सिर्फ एक क्लिक का उदाहरण दे रहा था ... क्योंकि सवाल पर संबंधित कोई कोड नहीं था ....

— bipen

2

किसी भी स्थिति में, आपके द्वारा दिया गया स्निपेट केवल काम करेगा, उपयोगकर्ता को एक बटन पर क्लिक करना चाहिए। ऐसा नहीं है कि कैसे काम करते हैं। कोई अन्य सुझाव?

— StackOverflowNewbie

क्लिक को बांधें, इसके डिफॉल्ट को रोकें और सबमिट बटन पर क्लिक करें

— कैंडलजैक

18

इस तरह का उपयोग करके आप अपने जेएस पर एक अंतहीन लूप करेंगे। एक बेहतर तरीका करने के लिए आप निम्नलिखित का उपयोग कर सकते हैं

var on_submit_function = function(evt){
    evt.preventDefault(); //The form wouln't be submitted Yet.
    (...yourcode...)

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok.
    $(this).submit();
}

$('form').on('submit', on_submit_function); //Registering on submit.

मुझे उम्मीद है यह मदद करेगा! धन्यवाद!

— Joepreludian
स्रोत

सबसे अच्छा तरीका वास्तव में, async फ़ंक्शन के साथ भिन्नता - gist.github.com/BjornMelgaard/8ba0ee9d07c20dd8c8b3550c9df3e9ef

— srghma

@bjornmelgaard मुझे यह याद रखना होगा कि async गैर मानक है ।

— वेलेरियो बज़

6

यह, IMHO, सबसे सामान्य और मजबूत समाधान है (यदि आपके कार्य उपयोगकर्ता-ट्रिगर हैं, उदाहरण के लिए 'उपयोगकर्ता एक बटन पर क्लिक करता है):

पहली बार किसी हैंडलर को कहा जाता है जिसे WHO ने ट्रिगर किया:
- अगर कोई उपयोगकर्ता इसे टॉगल करता है - अपना सामान करें, और फिर इसे फिर से ट्रिगर करें (यदि आप चाहते हैं) - प्रोग्रामेटिक रूप से
- अन्यथा - कुछ न करें (= "डिफ़ॉल्ट रूप से जारी रखें")

एक उदाहरण के रूप में, "क्या आप निश्चित हैं?" किसी बटन को केवल एक विशेषता के साथ सजाने से पॉपअप करें। अगर उपयोगकर्ता ऑप्ट आउट नहीं करता है तो हम सशर्त रूप से डिफ़ॉल्ट व्यवहार जारी रखेंगे।

1. आइए हम हर उस बटन को जोड़ते हैं जो हम चाहते हैं कि "क्या आप सुनिश्चित हैं" एक चेतावनी पाठ पॉपअप करें:

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2. ऐसे सभी बटनों को हैंडलर संलग्न करें:

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

बस।

— igorludi
स्रोत

1

बहुत बढ़िया जवाब! मुझे नहीं पता था कि आप .trigger () के लिए एक अतिरिक्त तर्क पारित कर सकते हैं

— जेम्स

5

$('#myform').on('submit',function(event){
  // block form submit event
  event.preventDefault();

  // Do some stuff here
  ...

  // Continue the form submit
  event.currentTarget.submit();
});

— उदंतं ऊदि वारनसूर्य
स्रोत

3

`jQuery`@ जोप्रोडेलियन के उत्तर के ऊपर एक छोटे बदलाव के साथ :

ध्यान रखने के लिए महत्वपूर्ण बिंदु:

.one(...) के स्थान पर .on(...) or .submit(...)
namedकार्य के बजाय anonymous functionहम इसका जिक्र करेंगे callback।

$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

आप `allIsWell`निम्न स्निपेट में चर का मान बदल सकते हैं `true`या `false`कार्यक्षमता का परीक्षण कर सकते हैं:

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

स्निपेट का विस्तार करें

शुभ लाभ...

— आकाश
स्रोत

2

शुद्ध जावास्क्रिप्ट तरीके से, आप डिफ़ॉल्ट को रोकने के बाद फ़ॉर्म जमा कर सकते हैं।

ऐसा इसलिए है क्योंकि HTMLFormElement.submit() कभी भी कॉल नहीं करता है onSubmit()। इसलिए हम उस विनिर्देश विषमता पर भरोसा कर रहे हैं कि वह फॉर्म जमा करे, जैसे कि यहां एक कस्टम ऑनसुमिट हैंडलर नहीं है।

var submitHandler = (event) => {
  event.preventDefault()
  console.log('You should only see this once')
  document.getElementById('formId').submit()
}

सिंक्रोनस अनुरोध के लिए इस फ़िडेल को देखें ।

समाप्त करने के लिए एक async अनुरोध की प्रतीक्षा करना उतना ही आसान है:

var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

आप एक अतुल्यकालिक अनुरोध के उदाहरण के लिए मेरी फिडल की जांच कर सकते हैं।

और अगर आप वादे से नीचे हैं:

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

और यहाँ यह अनुरोध है ।

— alairock
स्रोत

1

आप उपयोग कर सकते हैं e.preventDefault()जो वर्तमान ऑपरेशन को रोक देगा।

जितना आप कर सकते हैं$("#form").submit();

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}

— रोय नमिर
स्रोत

यह मेरे लिए बहुत भ्रामक है .. क्या यह सिर्फ और सिर्फ इधर-उधर नहीं होगा?

— dapidmini

1

"सबमिट लूपिंग के बिना सत्यापन इंजेक्शन":

मैं केवल HTML5 सत्यापन से पहले reCaptcha और कुछ अन्य सामान की जांच करना चाहता हूं, इसलिए मैंने ऐसा कुछ किया (सत्यापन फ़ंक्शन सही या गलत है):

$(document).ready(function(){
   var application_form = $('form#application-form');

   application_form.on('submit',function(e){

        if(application_form_extra_validation()===true){
           return true;
        }

        e.preventDefault();

   });
});

— डेनिस हेडेन
स्रोत

jQuery - डिफ़ॉल्ट को रोकें, फिर डिफ़ॉल्ट जारी रखें

jQuery@ जोप्रोडेलियन के उत्तर के ऊपर एक छोटे बदलाव के साथ :

ध्यान रखने के लिए महत्वपूर्ण बिंदु:

आप allIsWellनिम्न स्निपेट में चर का मान बदल सकते हैं trueया falseकार्यक्षमता का परीक्षण कर सकते हैं:

`jQuery`@ जोप्रोडेलियन के उत्तर के ऊपर एक छोटे बदलाव के साथ :

आप `allIsWell`निम्न स्निपेट में चर का मान बदल सकते हैं `true`या `false`कार्यक्षमता का परीक्षण कर सकते हैं: