डिफॉल्ट को फॉर्म सबमिट करें jQuery पर रोकें

138

इसमें गलत क्या है?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

jquery preventdefault

— djreed
स्रोत

12

यहाँ ठीक काम करता है । क्या आप अपने प्रश्न में अधिक जानकारी पोस्ट कर सकते हैं? यदि आप alert()सबमिट हैंडलर में जाते हैं तो क्या इसे कहा जाता है? यदि नहीं, तो यह हो सकता है कि आपकी स्क्रिप्ट में कोई त्रुटि हो जो इवेंट हैंडलर को सही तरीके से वायर होने से रोक सके। त्रुटि कंसोल में कुछ भी?

— टाउन

3

वह लिंक आंतरिक है और हमारे किसी काम का नहीं है।

— स्टीव रॉबिंस

शायद एक पुराने संस्करण को कैश किया गया था। अब काम करने लगता है।

— djreed

1

ईवेंट

— Liam

2

! सुनिश्चित करें कि DOM तैयार होने के बाद जावास्क्रिप्ट कोड चलता है।

— 15

175

इसे इस्तेमाल करे:

$("#cpa-form").submit(function(e){
    return false;
});

— जॉर्डन ब्राउन
स्रोत

12

यह काम करता है, लेकिन PreDefault काम का पसंदीदा तरीका क्यों नहीं है?

— 19 जून को माइक जे

26

एक बेहतर स्पष्टीकरण के लिए यह प्रश्न देखें: stackoverflow.com/questions/1357118/…

— जॉर्डन ब्राउन

8

यह गलत उत्तर है। e.preventDefault()एक फॉर्म सबमिशन के साथ ठीक काम करता है, समस्या ओपी के कोड में कहीं और है। का उपयोग return false कर सकता है अनपेक्षित परिणाम में परिणाम।

— चक ले बट

58

नया "ऑन" ईवेंट सिंटैक्स का उपयोग करें।

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

उद्धृत: https://api.jquery.com/on/

— scarver2
स्रोत

2

नमस्ते। यह मेरे लिए काम नहीं करता है। (हाँ, मैंने अपना कोड अंदर डाल दिया $(document).ready()) मैं इसे कैसे काम करूँ?

— गुई इमामुरा

1

@GuiImamura अधिक जानकारी की आवश्यकता है। क्या आपने मान्य चर को सेट किया हैtrue या केfalse ? क्या आप jsfiddle.net में अपना कोड दोबारा बना सकते हैं और लिंक भेज सकते हैं? alert()यह पुष्टि करने के लिए कि फ़ंक्शन फायरिंग है, को जोड़ने का प्रयास करें । कुछ लोगों ने बताया है कि फायरिंग से अन्य जंजीर घटनाओं को रोकने के e.stopPropagation();बाद जोड़ना e.preventDefault();।

— स्कार्वर 2

हैलो, मैं उपयोग कर रहा हूँ $('#myFormID').validationEngine('validate') चर के रूप में jQuery के सत्यापन इंजन सेvalid , इनपुट की जांच करने के लिए इनपुट एक वैध ई-मेल पता है। फिर भी, मैं चाहता हूं कि इसे डिफ़ॉल्ट व्यवहार को किसी भी तरह से रोका जाए; करता है preventDefaultयह पहले नहीं करता है, तो ब्लॉक के अंदर हो सकता है, है?

— गुई इमामुरा

@GuiImamura सुनकर आपको काम करने का मौका मिला। preventDefaultअंदर है मान्य नहीं तो प्रपत्र प्रस्तुत करने को रोकने के लिए ब्लॉक। दूसरे शब्दों में, यदि मान्य है , तो प्रपत्र के डिफ़ॉल्ट व्यवहार का उपयोग करें।

— scarver2

13

मेरा मानना है कि उपरोक्त उत्तर सभी सही हैं, लेकिन यह इंगित नहीं करता है कि submitविधि क्यों काम नहीं करती है।

ठीक है, submitअगर jQuery formतत्व नहीं मिल सकता है , तो विधि काम नहीं करेगी , और jQuery उस बारे में कोई त्रुटि नहीं देता है। यदि आपकी स्क्रिप्ट दस्तावेज़ के प्रमुख में रखी गई है, तो सुनिश्चित करें कि कोड तैयार होने के बाद चलता DOMहै । तो, समस्या का समाधान करेंगे।$(document).ready(function () { // your code here // });

सबसे अच्छा अभ्यास है, हमेशा अपनी स्क्रिप्ट को दस्तावेज़ के निचले भाग में रखें।

— towry
स्रोत

11

यह एक प्राचीन प्रश्न है, लेकिन यहां स्वीकृत उत्तर वास्तव में समस्या की जड़ में नहीं जाता है।

आप इसे दो तरीकों से हल कर सकते हैं। पहले jQuery के साथ:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

या बिना jQuery के:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

आपको return falseइस समस्या को हल करने के लिए उपयोग करने की आवश्यकता नहीं है।

— चक ले बट
स्रोत

मैंने jquery ईवेंट श्रोता के बजाय देशी js ईवेंट श्रोता को बदल दिया और यह काम कर रहा है। विचार के लिए धन्यवाद।

— ओरहान गाजी

6

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

— क्रिस्लिन पेत्रोव्स्की
स्रोत

यह मेरे लिए एक पेज पर सही काम करता है, जहां मेरे पास सर्वर साइड फॉर्म के अंदर क्लाइंट साइड फॉर्म है।

— लाइक्स

3

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

— श्रद्धा धर्ममेर
स्रोत

2

आपका कोड ठीक है बस आपको इसे तैयार फ़ंक्शन के अंदर रखने की आवश्यकता है।

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

— जय कथूरिया
स्रोत

यह सलाह पहले से ही अन्य उत्तरों द्वारा प्रदान की गई है। पेज ब्लोट को कम करने के लिए कृपया इस उत्तर को हटा दें। आप उसी भावना का प्रतिनिधित्व करने वाले अन्य उत्तर (ओं) को उखाड़ सकते हैं।

— मिकमैकुसा

2

नष्ट - यह हिस्सा पुराना है इसलिए कृपया इसका उपयोग न करें।

आप इस कोड को भी आज़मा सकते हैं, यदि आपके पास उदाहरण के लिए बाद में गतिशील रूप जोड़े गए हैं। उदाहरण के लिए आपने ajax के साथ एक विंडो async लोड की है और यह फ़ॉर्म सबमिट करना चाहते हैं।

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

अद्यतन - यदि आप गतिशील रूप से जोड़े गए सामग्री को संभालना चाहते हैं तो आपको दस्तावेज़ डोम को सुनने के लिए jQuery ऑन () विधि का उपयोग करना चाहिए।

केस 1, स्टैटिक वर्जन: यदि आपके पास केवल कुछ श्रोता हैं और आपके फॉर्म को संभालना मुश्किल है, तो आप सीधे "डॉक्यूमेंट लेवल" पर सुन सकते हैं। मैं दस्तावेज़ स्तर पर श्रोताओं का उपयोग नहीं करूंगा, लेकिन मैं कयामत के पेड़ में गहराई तक जाने की कोशिश करूंगा क्योंकि यह प्रदर्शन के मुद्दों को जन्म दे सकता है (आपकी वेबसाइट और आपकी सामग्री के आकार पर निर्भर करता है)

$('form#formToHandle').on('submit'...

या

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

केस 2, डायनेमिक संस्करण: यदि आप पहले से ही अपने कोड में दस्तावेज़ को सुनते हैं, तो यह तरीका आपके लिए अच्छा होगा। यह कोड के लिए भी काम करेगा जो बाद में DOM के माध्यम से जोड़ा गया था या AJAX के साथ गतिशील था।

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

या

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

या

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

— NFlows
स्रोत

7

.live()jQuery 1.7 के बाद से हटा दिया गया है और 1.9 के बाद से हटा दिया गया है। .on()इसके बजाय उपयोग करें ।

— हांक

0

नमस्ते ने Google टैग प्रबंधक (GTM) के साथ एक अजाक्स फॉर्म का काम करने के लिए एक समाधान की मांग की, रिटर्न झूठा को पूरा होने से रोका और घटना की सक्रियता को Google एनालिटिक्स समाधान पर वास्तविक समय में सबमिट करना था। e.preventDefault () ; जो सही ढंग से काम करता है वह कोड का अनुसरण करता है:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

— नवी
स्रोत

0

e.preventDefault () केवल तभी ठीक काम करता है जब आपको अपने javascripts पर समस्या न हो, अपने javascripts की जाँच करें यदि e.preventDefault () काम नहीं करता है तो आपके JS के कुछ अन्य भाग भी काम नहीं करते हैं।

— ndoty
स्रोत

0

खैर मुझे एक ऐसी ही समस्या का सामना करना पड़ा। मेरे लिए समस्या यह है कि DOM रेंडर होने से पहले JS फाइल लोड हो जाती है। इसलिए अपने <script>अंत तक जाएं<body> टैग ।

या defer का उपयोग करें।

<script defer src="">

इसलिए निश्चिंत होकर e.preventDefault()काम करें।

— विग्नेश वार
स्रोत