JQuery का उपयोग करना - फ़ॉर्म को सबमिट करने से रोकना

178

मैं एक फॉर्म को jquery का उपयोग करने से कैसे रोक सकता हूं?

मैंने सब कुछ करने की कोशिश की - नीचे मैंने कोशिश की 3 अलग-अलग विकल्प देखें, लेकिन यह सब काम नहीं करेगा:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

क्या गलत हो सकता है?

अद्यतन - यहाँ मेरा html है:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

क्या यहाँ कुछ गड़बड़ है?

jquery forms

— लुसी वेदरफोर्ड
स्रोत

अपना HTML दिखाएं क्योंकि preventDefault में कुछ भी गलत नहीं है या आपने इसे पोस्ट करते समय गलत लिखा है, इसके अलावा आपके चयनकर्ता पूरी तरह से गलत है।

— स्पार्की

1

return false;.submit()मेरे लिए काम करने के बाद ! मैं एक ही मुद्दा था

— d -_- b

यदि हैंडलर में जावास्क्रिप्ट त्रुटि होती है तो e.preventDefault();कोड नहीं पहुंचता / निष्पादित नहीं होता है।

— टॉम

263

दो चीजें बाहर खड़ी हैं:

यह संभव है कि आपका फॉर्म नाम नहीं है form। बल्कि # ड्रॉप करके टैग को देखें।
इसके अलावा, e.preventDefaultसही JQuery वाक्यविन्यास है, उदाहरण के लिए
```
    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });
```

विकल्प सी भी काम करना चाहिए। मैं विकल्प बी से परिचित नहीं हूं

एक पूर्ण उदाहरण:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— फिलिप फूरी
स्रोत

2

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

— फिलिप फौरी

@ LucyWeatherford, मैंने अपने उत्तर को एक नमूने के साथ अद्यतन किया है जो काम करता है। शायद आप कुछ समय के लिए हाजिर हों।

— फिलिप फोरी

आपके अपडेट html में मैंने देखा कि आपके पास अपने फॉर्म के लिए क्लास की विशेषता है। से अपने JQuery चयनकर्ता बदलें $('#form')करने के लिए $('.form')वर्ग विशेषताओं के लिए।

— फिलिप फौरी

1

धन्यवाद! मैंने उसी पृष्ठ पर आपके कोड का उपयोग करके समाप्त कर दिया, और यह काम किया, फिर भी अनिश्चित था कि क्या गलत था, लेकिन अब यह सब अच्छा है। धन्यवाद!

— लूसी वेदरफोर्ड

1

@ YoungeloRigo ई बस नाम है जो आप पैरामीटर को देते हैं, इस मामले में यह सबमिट ईवेंट है।

— स्क्वा

34

आपके पास शायद कुछ रूप हैं पृष्ठ पर और $ ('फ़ॉर्म') का उपयोग करके सबमिट करें () इस घटना को आपके पृष्ठ पर फ़ॉर्म की पहली घटना में जोड़ता है। इसके बजाय कक्षा चयनकर्ता का उपयोग करें, या यह प्रयास करें:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

या इसका बेहतर संस्करण:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— आर्टेम किसेलेव
स्रोत

1

मेरे मामले में, झूठी वापसी एक कुंजी थी।

— एलक्विमिस्टा

19

डिफॉल्ट को रोकने / फ़ॉर्म जमा करने से रोकने के लिए उपयोग करें

e.preventDefault();

घटना बुदबुदाती उपयोग को रोकने के लिए

e.stopPropagation();

फॉर्म जमा करने से रोकने के लिए 'गलत रिटर्न' पर भी काम करना चाहिए।

— अल्फा
स्रोत

इस उत्तर को देखें क्योंकि jQuery इनको अलग तरीके से संभालता है। stackoverflow.com/questions/1357118/…

— स्पार्कली

1

ईवेंट को समझने के लिए इसे चेक करें bubling quirksmode.org/js/events_order.html

— द अल्फा

2

पर jQuery एपीआई राज्यों: "एक ईवेंट हैंडलर से झूठी रिटर्निंग स्वचालित रूप से कॉल करेंगे event.stopPropagation()और event.preventDefault()एक। falseमूल्य भी के लिए एक आशुलिपि के रूप में हैंडलर के लिए पारित किया जा सकता function(){ return false; }।"

— पॉल

7

मेरी भी यही समस्या थी। मैंने भी कोशिश की थी कि आपने क्या कोशिश की थी। फिर मैंने अपने तरीके को बदलकर jquery का उपयोग नहीं किया, लेकिन प्रपत्र टैग में "ऑनसाइट" विशेषता का उपयोग करके।

<form onsubmit="thefunction(); return false;">

यह काम करता हैं।

लेकिन, जब मैंने केवल "thefunction ()" में गलत रिटर्न वैल्यू डालने की कोशिश की, तो यह सबमिट करने की प्रक्रिया को नहीं रोकता है, इसलिए मुझे "गलत को वापस करना" चाहिए। ऑनसाइट विशेषता में। इसलिए, मैं यह निष्कर्ष निकालता हूं कि मेरे फॉर्म एप्लिकेशन को जावास्क्रिप्ट फ़ंक्शन से रिटर्न वैल्यू नहीं मिल सकती है। मेरे पास इसके बारे में कोई विचार नहीं है।

— लुकी बी
स्रोत

1

यह false;और के बीच का अंतर है return false;। आप की आवश्यकता होगीonsubmit="return thefunction();"

— xr280xr

4

मुझे एक ही समस्या थी और मैंने इस तरह से हल किया (सुरुचिपूर्ण नहीं, लेकिन यह काम करता है):

$('#form').attr('onsubmit','return false;');

और इसका फायदा है, मेरी राय में, आप किसी भी समय अपनी इच्छानुसार स्थिति को पलट सकते हैं:

$('#form').attr('onsubmit','return true;');

— vinxxe
स्रोत

शायद यह थोड़ा और अधिक आरामदायक होगा कि फॉर्म को हटाते समय केवल विशेषता को हटा दें। रोकथाम$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

ईवेंट को फॉर्म एलिमेंट में न जमा करने के लिए अटैच करें। उदाहरण के लिए अपने html में ऐसा करें

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— एम वीस
स्रोत

2

आप बस यह जांच सकते हैं कि क्या फॉर्म वैध है यदि हाँ तर्क जमा करें अन्यथा त्रुटि दिखाएं।

एचटीएमएल

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

जावास्क्रिप्ट

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— कोड जासूस
स्रोत

1

जब मैं <form>विशेषता के बिना टैग का उपयोग कर रहा हूं id="form"और इसे इसके टैग नाम से सीधे jquery में कॉल करता हूं तो यह मेरे साथ काम करता है।
HTML फ़ाइल में आपका कोड:

<form action="page2.php" method="post">

और जेकरी लिपि में:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— नोहा सलाह
स्रोत

1

$('#form')के साथ एक तत्व के लिए लग रहा है id="form"।

$('form') रूप तत्व की तलाश करता है

— राहुल
स्रोत

0

आप फॉर्म आईडी भूल जाते हैं, और यह काम करता है

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— शिंतदोनिकु एलिसा
स्रोत

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

यहाँ से: https://api.jquery.com/submit-selector/ (प्रस्तुत प्रकारों पर दिलचस्प पृष्ठ)

— क्रिस स्ट्रॉन्ग
स्रोत

0

यह भी काम करने के लिए प्रकट होता है और थोड़ा सरल हो सकता है:

$('#Form').on('submit',function(){
    return false;
})

— Ukuser32
स्रोत

0

JQuery का उपयोग करके, आप निम्न कार्य कर सकते हैं:

1-घटना को जमा करने से रोकने के दौरान, सबमिट बटन के साथ मूल फ़ॉर्म सबमिट ईवेंट का उपयोग करें

2- वैध संपत्ति की जाँच करें यह निम्नलिखित के रूप में लागू किया जा सकता है:

1- एचटीएमएल:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- जावास्क्रिप्ट

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— मोहम्मद नगीब
स्रोत