दर्ज पर jquery अक्षम फ़ॉर्म सबमिट करें


207

मेरे पृष्ठ में निम्नलिखित जावास्क्रिप्ट है जो काम नहीं करती है।

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

मैं फार्म को सबमिट करने को अक्षम करना चाहूंगा, या मेरे ajax फॉर्म सबमिट करने के लिए कॉल करना बेहतर होगा। या तो समाधान स्वीकार्य है लेकिन ऊपर दिया गया कोड मैं फ़ॉर्म को सबमिट करने से नहीं रोकता है।


3
यहाँ एक सरल HTML केवल समाधान है: stackoverflow.com/a/51507806/337934
सैमबी

जवाबों:


420

अगर keyCodeनहीं पकड़ा गया, तो पकड़ें which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

संपादित करें: यह याद किया, इसके keyupबजाय का उपयोग करना बेहतर हैkeypress

EDIT 2: जैसे कि फ़ायरफ़ॉक्स के कुछ नए संस्करणों में फ़ॉर्म सबमिशन को रोका नहीं जाता है, के रूप में अच्छी तरह से कीपर ईवेंट को जोड़ना सुरक्षित है। इसके अलावा, यह घटना ("?" को केवल "नाम" के रूप में बाँधने से काम नहीं करता है) लेकिन केवल फॉर्म आईडी के लिए। इसलिए मैंने कोड उदाहरण को उचित रूप से बदलकर इसे और अधिक स्पष्ट कर दिया।

EDIT 3: बदल दिया bind()गयाon()


15
jQuery इसे सामान्य बनाता है e.which, इसलिए आपको e.keyCodeइस समस्या के सबसे संभावित कारण के लिए +1 करने की आवश्यकता नहीं है , लेकिन +1।
बोजैंगल्स

4
क्या आपको इसकी आवश्यकता return false;है? e.preventDefault();जोर से लगता है
chromigo

10
जरूरी! इस समाधान ब्लॉक textarea में टूट जाता है।
जर्मन खोखलोव

4
समस्या यह है कि यदि मेरे पास एक ही टेक्स्टबॉक्स है, तो अब मैं टेक्स्टबॉक्स में एक एंट्री (नई लाइन बनाने के लिए) नहीं जोड़ सकता।
टिक्की

3
keyCode === 13 && !$(e.target).is('textarea')
तेरन

62

Enterजब आप इनपुट तत्वों पर ध्यान केंद्रित करते हैं तो आमतौर पर फॉर्म जमा किया जाता है ।

हम फार्म के भीतर इनपुट तत्वों पर Enterकुंजी (कोड 13) को अक्षम कर सकते हैं :

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

डेमो: http://jsfiddle.net/bnx96/325/


iOS गो बटन एक कस्टम ऑटोकॉमल इनपुट क्षेत्र पर मेरी समस्या थी। इससे यह हल हो गया।
डायलन वालडे सेप

11
यह प्रवेश कुंजी textareasको उसी रूप में उपयोग करने से रोकता है । के $("form input")बजाय का उपयोग $("form :input")कर इसे ठीक करने के लिए लगता है। DEMO: jsfiddle.net/bnx96/279
shaneparsons

43

और भी छोटा:

$('myform').submit(function() {
  return false;
});

35
लेकिन यह उपयोगकर्ता क्लिक को भी रोकेगा?
हैबिहुआंग

5
@haibuihoang हाँ यह फ़ॉर्म सबमिशन को अक्षम कर देगा।
टॉम

7
आपको function(e) {e.preventDefault();}घटना संचालकों में रिटर्न मान के रूप में उपयोग करना चाहिए : पदच्युत किया गया: stackoverflow.com/a/20045473/601386
फ्लू

6
@ user1111929 यह बहुत अच्छा काम करता है, लेकिन इसका शीर्ष उत्तर नहीं होना चाहिए क्योंकि प्रश्न केवल बटन Enterद्वारा फ़ॉर्म सबमिट करने को अक्षम करने के बारे में पूछा गया था Submit
डेवस्लैब

एक सामान्य स्थिति जिसमें आप फ़ॉर्म सबमिशन को संरक्षित करना चाहते हैं, लेकिन 'एन्टर' की को दबाने पर सबमिशन को डिसेबल कर देते हैं, यदि आप onClickकिसी फॉर्म को वेरिफाई करने के लिए jQuery इवेंट का उपयोग करने का निर्णय लेते हैं , और फिर भी jQuery का उपयोग करके सबमिट करते हैं। दूसरे शब्दों में, ऐसे मामले हैं जहां आप केवल जावास्क्रिप्ट / jQuery के माध्यम से सबमिट करना चाहते हैं। जब आप अभी भी इस समाधान के साथ AJAX का उपयोग कर सकते हैं, तो यह submitविधि की आधार कार्यक्षमता को अक्षम करता है ।
JRad


14
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

यह समाधान वेबसाइट पर सभी रूपों पर काम करता है (अजाक्स के साथ डाले गए रूपों पर भी), केवल इनपुट ग्रंथों में एन्टर को रोकता है। इसे दस्तावेज़ तैयार फ़ंक्शन में रखें, और जीवन के लिए इस समस्या को भूल जाएं।


9

ऊपर दिए गए अधिकांश उत्तर उपयोगकर्ताओं को एक textarea क्षेत्र में नई लाइनें जोड़ने से रोकेंगे। यदि यह ऐसी चीज है जिससे आप बचना चाहते हैं, तो आप इस विशेष मामले को जांच कर बाहर कर सकते हैं कि वर्तमान में किस तत्व पर ध्यान केंद्रित किया गया है:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

8

ENTER कुंजी के लिए प्रत्येक कीस्ट्रोक को कैप्चर करने और परीक्षण करने का ओवरकिल वास्तव में मुझे परेशान करता है, इसलिए मेरा समाधान निम्न ब्राउज़र व्यवहार पर निर्भर करता है:

ENTER दबाने से a ट्रिगर होगा पर सबमिट बटन पर क्लिक इवेंट (IE11, Chrome 38, FF 31 में परीक्षण किया गया) ** (रेफरी: http://mattsnider.com/how-forms-submit-when-pressing-enter/ ) पर क्लिक करने से ईवेंट

तो मेरा समाधान मानक सबमिट बटन (यानी <input type="submit"> ) ताकि उपरोक्त व्यवहार विफल हो जाए क्योंकि ENTER दबाए जाने पर जादुई क्लिक करने के लिए कोई सबमिट बटन नहीं है। इसके बजाय, मैं jQuery की .submit()विधि के माध्यम से फ़ॉर्म जमा करने के लिए एक नियमित बटन पर एक jQuery क्लिक हैंडलर का उपयोग करता हूं ।

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

डेमो: http://codepen.io/anon/pen/fxeyv?editors=101

** यह व्यवहार लागू नहीं होता है यदि फॉर्म में केवल 1 इनपुट फ़ील्ड है और वह फ़ील्ड 'टेक्स्ट' इनपुट है; इस स्थिति में फॉर्म को एचआर की पर प्रस्तुत किया जाएगा भले ही कोई भी जमा बटन एचटीएमएल मार्कअप में मौजूद न हो (जैसे खोज क्षेत्र)। यह 90 के दशक से मानक ब्राउज़र व्यवहार है।


मैंने एक अदृश्य इनपुट बॉक्स को काउंटर करने के लिए जोड़ा "फॉर्म को ENTER कुंजी पर सबमिट किया जाएगा" जिसके कारण "फॉर्म में केवल 1 इनपुट फ़ील्ड है और वह फ़ील्ड एक 'टेक्स्ट' इनपुट है।"
लुओ जियानग हुई

6

यदि आप केवल सबमिट पर सबमिट करना अक्षम करते हैं और बटन सबमिट करते हैं तो फ़ॉर्म की ऑनसुबमिट घटना का उपयोग करें

<form onsubmit="return false;">

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


1
यह सबमिट बटन पर क्लिक करने सहित सभी फ़ॉर्म सबमिशन को अक्षम कर देगा।
निक

100% नहीं ... एक नियमित रूप से सबमिट की गई कुंजी को काम करें ... रोकने के लिए सबसे अच्छा उपयोग jquery
KingRider

अच्छा वैकल्पिक उत्तर (ऊपर के केवेट के साथ) क्योंकि ... ठीक है, कभी-कभी यह सब आपको चाहिए।
Emilys

यह वास्तव में मैं एक स्थिति के लिए क्या जरूरत है, धन्यवाद
shababhsiddique

4

आप इसे पूरी तरह से शुद्ध जावास्क्रिप्ट में कर सकते हैं, सरल और आवश्यक कोई लाइब्रेरी नहीं। यह एक समान विषय के लिए मेरा विस्तृत जवाब है: फॉर्म के लिए एंटर कुंजी को अक्षम करना

संक्षेप में, यहाँ कोड है:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

यह कोड केवल इनपुट प्रकार = 'टेक्स्ट' के लिए "एंटर" कुंजी को रोकने के लिए है। (क्योंकि आगंतुक को पूरे पृष्ठ में हिट करने की आवश्यकता हो सकती है) यदि आप अन्य कार्यों के लिए "एंटर" को भी अक्षम करना चाहते हैं, तो आप कंसोल जोड़ सकते हैं। अपने परीक्षण उद्देश्यों के लिए, और क्रोम में F12 को हिट करें, पृष्ठ पर "कंसोल" टैब और "बैकस्पेस" पर जाएं और इसे देखने के लिए अंदर देखें कि क्या मान लौटाए गए हैं, फिर आप उन सभी मापदंडों को लक्षित कर सकते हैं ताकि कोड को और बढ़ाया जा सके। "e.target.nodeName" , "e.target.type" और कई और अधिक के लिए अपनी आवश्यकताओं के अनुरूप ...


2
वास्तव में यह होना चाहिए e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'। निर्दिष्ट कोड के साथ यह फॉर्म जमा करने की अनुमति देगा यदि कोई रेडियो या चेकबॉक्स केंद्रित है।
afnpires

3

मुझे नहीं पता कि आप पहले से ही इस समस्या को हल करते हैं, या कोई भी अभी इस समस्या को हल करने की कोशिश कर रहा है, लेकिन यहाँ इसके लिए मेरा समाधान है!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

2

सरल तरीका है बटन के प्रकार को बटन में बदलना - html में और फिर js में ईवेंट जोड़ें ...

इससे बदलें:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

सेवा

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

और js या jquery में जोड़ें:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

1

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

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

1

फ़ायरफ़ॉक्स में, जब आप इनपुट पर होते हैं और एंटर दबाते हैं, तो यह ऊपरी रूप प्रस्तुत करेगा। समाधान वसीयत फ़ॉर्म में है इसे जोड़ें:

<input type="submit" onclick="return false;" style="display:none" />

1

3 साल बाद और एक भी व्यक्ति ने इस सवाल का पूरी तरह से जवाब नहीं दिया है।

पूछने वाला डिफ़ॉल्ट फॉर्म जमा को रद्द करना चाहता है और अपने स्वयं के अजाक्स को कॉल करता है। यह एक सरल समाधान के साथ एक सरल अनुरोध है। प्रत्येक इनपुट में दर्ज किए गए प्रत्येक वर्ण को इंटरसेप्ट करने की आवश्यकता नहीं है।

यह मानते हुए कि फॉर्म में एक सबमिट बटन है, <button id="save-form">या एक <input id="save-form" type="submit">, क्या करें:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});


-2

जब फ़ाइल समाप्त हो जाती है (लोड पूरा हो जाता है), स्क्रिप्ट "एंट्री" कुंजी के लिए प्रत्येक घटना का पता लगाता है और वह घटना को पीछे छोड़ देता है।

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

कुछ स्पष्टीकरण जोड़ें
HaveNoDisplayName

@HaveNoDisplayName: अपडेट किया गया।
McNavy

-4

सभी ब्राउज़रों के लिए जावास्क्रिप्ट में पूर्ण समाधान

उपरोक्त कोड और अधिकांश समाधान परिपूर्ण हैं। हालांकि, मुझे लगता है कि सबसे ज्यादा पसंद किया जाने वाला एक "संक्षिप्त उत्तर" जो अधूरा है।

तो यहाँ पूरा जवाब है। IE 7 के लिए देशी समर्थन के साथ जावास्क्रिप्ट में।

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

यह समाधान अब उपयोगकर्ता को एंटर की का उपयोग करके सबमिट करने से रोकेगा और पृष्ठ को फिर से लोड नहीं करेगा, या आपको पृष्ठ के शीर्ष पर ले जाएगा, यदि आपका फॉर्म कहीं नीचे है।


8
यदि आप "सबमिट" बटन पर क्लिक करते हैं तो यह फ़ॉर्म को सबमिट होने से रोकता है।
मारियो वर्नर

-10

इस बारे में कैसा है:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

यह आपके ऐप में सबमिट बटन के साथ सभी रूपों को अक्षम कर देना चाहिए।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.