फॉर्म सबमिट करने से बटन को कैसे रोकें

917

अगले पृष्ठ में, फ़ायरफ़ॉक्स के साथ हटाएं बटन फ़ॉर्म को सबमिट करता है, लेकिन ऐड बटन नहीं करता है। मैं फॉर्म को सबमिट करने से हटाने वाले बटन को कैसे रोकूं?

<html>

<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function addItem() {
            var v = $('form :hidden:last').attr('name');
            var n = /(.*)input/.exec(v);

            var newPrefix;
            if (n[1].length == 0) {
                newPrefix = '1';
            } else {
                newPrefix = parseInt(n[1]) + 1;
            }

            var oldElem = $('form tr:last');
            var newElem = oldElem.clone(true);
            var lastHidden = $('form :hidden:last');

            lastHidden.val(newPrefix);

            var pat = '=\"' + n[1] + 'input';

            newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
            newElem.appendTo('table');
            $('form :hidden:last').val('');
        }

        function removeItem() {
            var rows = $('form tr');
            if (rows.length > 2) {
                rows[rows.length - 1].html('');
                $('form :hidden:last').val('');
            } else {
                alert('Cannot remove any more rows');
            }
        }
    </script>
</head>

<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>
javascript  html  forms  button  submit 
— Khanpo
स्रोत
आप किस जवाब की सलाह देते हैं?
— sanepete

जवाबों:

1795

आप एक HTML5 बटन तत्व का उपयोग कर रहे हैं। याद रखें कि यह बटन सबमिट करने का एक डिफ़ॉल्ट व्यवहार है, जैसा कि W3 विनिर्देश में बताया गया है: W3C HTML5 बटन

तो आपको इसके प्रकार को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है:

<button type="button">Button</button>

डिफ़ॉल्ट सबमिट प्रकार को ओवरराइड करने के लिए। मैं सिर्फ यही कारण बताना चाहता हूं कि ऐसा क्यों होता है =)

=)

— Metafaniel
स्रोत
17
मैं यह भी बताना चाहता हूं कि एक HTML एलीमेंट जिसमें एक प्रकार की विशेषता होती है, जिसमें से एक प्रकार का बटन होता है , में f # $ 's नहीं होना चाहिए, जिसमें एक डिफॉल्ट टाइप सबमिट हो । यह सिर्फ सादा मूर्खतापूर्ण है, और कल्पना में एक बड़ी गलती है। मैं हर समय रूपों में बटन का उपयोग करता हूं, और भले ही यह एक किनारे का मामला था (जो यह नहीं है), यह अभी भी डिफ़ॉल्ट प्रकार को जमा करने के लिए समझ में आता है।
— dudewad
3
🤯 मैंने इस सप्ताह के अधिकांश समय व्यतीत किए हैं जब मेरा इलेक्ट्रॉन ऐप "ताज़ा" हो जाता है जब मैं एक फॉर्म के भीतर एक बटन का उपयोग करके एक मोडल खोलता हूं। जैसा कि मुझे उम्मीद थी कि यह एक बार होगा और फिर ऐप ने ऐसा व्यवहार किया। मुझे बिल्कुल पता नहीं था कि क्या चल रहा है। यही था वह! मेरे पास डिफ़ॉल्ट प्रकार सबमिट करने के साथ कोई समस्या नहीं है। यह थोड़ा सा मिल गया है, हालांकि मुझे इसके बारे में जानने में पाँच साल लग गए।
— 1913
4
आपके संदर्भ के लिए धन्यवाद, मैंने अभी सीखा है कि फॉर्म के लिए एक प्रकार = रीसेट है। बहुत बढ़िया!
— डुओंग गुयेन
602

अपने बटनों पर टाइप सेट करें:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... कि घटना हैंडलर में एक अपवाद होने पर उन्हें जमा कार्रवाई शुरू करने से रोकना होगा। फिर, अपने removeItem()फ़ंक्शन को ठीक करें ताकि यह एक अपवाद को ट्रिगर न करे:

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

परिवर्तन पर ध्यान दें: आपके मूल कोड ने jQuery सेट से एक HTML तत्व निकाला, और फिर उस पर एक jQuery विधि को कॉल करने की कोशिश की - इसने एक अपवाद को फेंक दिया, जिसके परिणामस्वरूप बटन के लिए डिफ़ॉल्ट व्यवहार हुआ।

FWIW, एक और तरीका है जिससे आप इसके साथ जा सकते हैं ... jQuery का उपयोग करके अपने ईवेंट हैंडलर को तार दें, और डिफ़ॉल्ट व्यवहार को रद्द करने के लिए jQuery के ईवेंट ऑब्जेक्ट पर preventDefault () विधि का उपयोग करें :

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

यह तकनीक आपके सभी तर्कों को एक जगह पर रखती है, जिससे इसे डीबग करना आसान हो जाता है ... यह आपको typeबटन को वापस बदलकर submitऔर ईवेंट सर्वर-साइड को हैंडल करके फॉल-बैक लागू करने की अनुमति देता है - इसे विनीत के रूप में जाना जाता है जावास्क्रिप्ट ।

— Shog9
स्रोत
4
प्रकार = "बटन" हमेशा मेरे लिए फ़ायरफ़ॉक्स में काम नहीं करता है। यदि js पर्याप्त जटिल है, और एक त्रुटि है तो फ़ायरफ़ॉक्स वैसे भी फ़ॉर्म सबमिट कर देगा। पागलपन!
— मैथ्यू लॉक
1
@MatthewLock: शायद ही - स्क्रिप्ट में कोई त्रुटि उस कोड ब्लॉक को बंद कर देती है, और कार्रवाई हमेशा की तरह आगे बढ़ती है। JQuery घटना विधियों e.preventDefault () और / या e.stopPropgation () विधि की पहली पंक्तियों के रूप में लागू करने का प्रयास करें। अधिक जानने के लिए stackoverflow.com/questions/2017755/… देखें
— ब्रिचिन्स
8
टाइप = बटन को फॉर्म को कभी भी सबमिट नहीं करना चाहिए, फिर चाहे वह कोई भी हो
— मैथ्यू लॉक
1
return falseइतना महत्वपूर्ण है। कभी-कभी इसे सबमिट बटन के लिए भी उपयोग करें ( onclick）
— जेमी
7
मुझे लगता है कि html यहाँ अजीब है। यह डिफ़ॉल्ट रूप से टाइप = "बटन" होना चाहिए, सबमिट नहीं करना चाहिए। डिफ़ॉल्ट रूप से सबमिट करना मेरे लिए हमेशा अप्रत्याशित होता है। इसका अपवाद है।
— httpete
31

कुछ समय पहले मुझे कुछ इसी तरह की जरूरत थी ... और मुझे मिल गया।

तो मैं यहाँ क्या डाल सकता हूँ कि मैं कैसे कर सकता हूँ कि ट्रिक जावास्क्रिप्ट के बिना किसी सत्यापन के बिना सबमिट किया जा सकता है और केवल तभी सत्यापन निष्पादित करता है जब उपयोगकर्ता एक बटन दबाता है (आमतौर पर एक बटन)।

उदाहरण के लिए मैं केवल दो फ़ील्ड और सबमिट बटन के साथ एक न्यूनतम फ़ॉर्म का उपयोग करूंगा।

याद रखें कि क्या चाहिए: जावास्क्रिप्ट से इसे बिना किसी जाँच के जमा किया जा सकता है। हालाँकि, यदि उपयोगकर्ता ऐसा बटन दबाता है, तो सत्यापन किया जाना चाहिए और केवल तभी भेजा जाना चाहिए जब सत्यापन पास हो।

आम तौर पर यह सब कुछ के पास से शुरू होता है (मैंने सभी अतिरिक्त सामानों को हटा दिया है जो महत्वपूर्ण नहीं हैं):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

देखें कि कैसे फ़ॉर्म टैग नहीं है onsubmit="..." (याद रखें कि यह एक शर्त थी कि यह नहीं होना चाहिए)।

समस्या यह है कि फॉर्म हमेशा सबमिट किया जाता है, भले ही onclickरिटर्न trueयाfalse ।

अगर मैं के लिए बदल जाते type="submit"हैंtype="button" , यह काम करने के लिए लगता है, लेकिन ऐसा नहीं करता। यह कभी भी फॉर्म नहीं भेजता है, लेकिन यह आसानी से किया जा सकता है।

तो आखिरकार मैंने इसका इस्तेमाल किया:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

और function Validator, कहाँ पर return True;है, मैं भी एक जावास्क्रिप्ट जमा वाक्य जोड़ता हूं, कुछ इस तरह से:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""बस जावास्क्रिप्ट के लिए है getElementById,name="" यह केवल POST डेटा पर प्रदर्शित होने के लिए है।

इस तरह से यह मेरी जरूरत के अनुसार काम करता है।

मैंने इसे केवल उन लोगों के लिए रखा है onsubmitजिन्हें फ़ॉर्म पर कोई फ़ंक्शन की आवश्यकता नहीं है , लेकिन उपयोगकर्ता द्वारा एक बटन दबाए जाने पर कुछ सत्यापन करें।

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

कारण: यदि उपयोगकर्ता वह है जो मुझे सबमिट करना चाहता है और उसे सत्यापन करने की आवश्यकता है, लेकिन यदि यह जावास्क्रिप्ट है तो मुझे कभी-कभी सबमिट करने की आवश्यकता होती है जबकि ऐसी मान्यताएं इससे बचती हैं।

यह अजीब लग सकता है, लेकिन उदाहरण के लिए सोचते समय नहीं: एक लॉगिन पर ... कुछ प्रतिबंधों के साथ ... जैसे कि PHP सत्रों का उपयोग करने की अनुमति नहीं है और न ही कुकीज़ की अनुमति है!

तो किसी भी लिंक को ऐसे फॉर्म सबमिट में परिवर्तित किया जाना चाहिए, ताकि लॉगिन डेटा खो न जाए। जब कोई लॉगिन अभी तक नहीं हुआ है, तो यह भी काम करना होगा। इसलिए लिंक पर कोई सत्यापन नहीं किया जाना चाहिए। लेकिन मैं उपयोगकर्ता को एक संदेश प्रस्तुत करना चाहता हूं यदि उपयोगकर्ता ने दोनों क्षेत्रों, उपयोगकर्ता और पास में प्रवेश नहीं किया है। इसलिए यदि कोई लापता है, तो फॉर्म नहीं भेजा जाना चाहिए! समस्या है।

समस्या देखें: प्रपत्र को तब नहीं भेजा जाना चाहिए जब एक फ़ील्ड केवल तभी खाली हो जब उपयोगकर्ता ने एक बटन दबाया हो, अगर यह एक जावास्क्रिप्ट कोड है तो इसे भेजा जाना चाहिए।

यदि मैं onsubmitफॉर्म टैग पर काम करता हूं, तो मुझे यह जानना होगा कि क्या यह उपयोगकर्ता या अन्य जावास्क्रिप्ट है। चूंकि कोई पैरामीटर पारित नहीं किया जा सकता है, यह सीधे संभव नहीं है, इसलिए कुछ लोग यह बताने के लिए एक चर जोड़ते हैं कि क्या सत्यापन किया जाना चाहिए या नहीं। सत्यापन समारोह पर पहली बात यह है कि चर मूल्य, आदि की जांच करें ... बहुत जटिल और कोड यह नहीं कहता कि वास्तव में क्या चाहता है।

तो समाधान के लिए टैग टैग पर ऑनसाइट नहीं है। इनडायड को वह स्थान दें जहां यह वास्तव में जरूरत है, बटन पर।

दूसरी तरफ, क्यों मैं वैचारिक रूप से ओनसुबमिट कोड डाल रहा हूं, मैं नहीं चाहता कि ओनसुबमिट सत्यापन हो। मैं वास्तव में बटन सत्यापन चाहता हूं।

न केवल कोड अधिक स्पष्ट है, यह वह जगह है जहां यह होना चाहिए। बस इसे याद रखें: - मैं नहीं चाहता कि जावास्क्रिप्ट को फ़ॉर्म को मान्य किया जाए (जो हमेशा सर्वर की ओर PHP द्वारा किया जाना चाहिए) - मैं उपयोगकर्ता को यह दिखाना चाहता हूं कि सभी फ़ील्ड खाली नहीं होना चाहिए, यह बताने वाला एक संदेश है जिसमें जावास्क्रिप्ट (क्लाइंट की आवश्यकता है) की ओर)

तो क्यों कुछ लोग (सोचते हैं या मुझे बताते हैं) यह एक ऑनसाइट सत्यापन पर किया जाना चाहिए? नहीं, वैचारिक रूप से मैं ग्राहक पक्ष में मान्य एक ऑनसाइट नहीं कर रहा हूं। मैं बस एक बटन पर कुछ कर रहा हूं दबाया जाता है, तो बस इसे लागू करने के लिए क्यों नहीं?

ठीक है कि कोड और शैली पूरी तरह से चाल है। किसी भी जावास्क्रिप्ट पर, जिसे मुझे अपने द्वारा डाले गए फॉर्म को भेजने की आवश्यकता है:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

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

लेकिन यदि उपयोगकर्ता सबमिट बटन पर क्लिक करता है (उर्फ type="button"नहीं type="submit") तो फॉर्म जमा करने से पहले सत्यापन किया जाता है और यदि वैध नहीं भेजा गया है।

अच्छी तरह से उम्मीद है कि यह दूसरों को लंबे और जटिल कोड की कोशिश नहीं करने में मदद करता है। बस onsubmitजरूरत नहीं है, और उपयोग नहीं करते हैं onclick। लेकिन बस बदलने के type="submit"लिए याद रखें type="button"और कृपया submit()जावास्क्रिप्ट द्वारा करना न भूलें ।

— z666zz666z
स्रोत
28

मैं शोग 9 से सहमत हूं, हालांकि मैं इसके बजाय उपयोग कर सकता हूं:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

W3schools के अनुसार , <button>टैग का विभिन्न ब्राउज़रों पर अलग-अलग व्यवहार होता है।

— poundifdef
स्रोत
18

मान लीजिए आपके HTML फॉर्म में है id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

परिणाम देखने के लिए अपने कोड में यह jQuery स्निपेट जोड़ें,

$("#form_id").submit(function(){
  return false;
});
— प्रतीक जोशी
स्रोत
18

आप बस jQuery का उपयोग करके अपने बटनों का संदर्भ प्राप्त कर सकते हैं, और नीचे दिए गए प्रचार को रोक सकते हैं:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
— अता इरावनी
स्रोत
2
e.preventDefault(); e.stopPropagation();काम करने के लिए पर्याप्त है। e.stopImmediatePropagation()यह क्रोम में अपरिभाषित विधि की एक त्रुटि देता है।
— सुब्रतो
14

$("form").submit(function () { return false; }); जो बटन को सबमिट करने से रोकेगा या आप बटन प्रकार को "बटन" में बदल सकते हैं, <input type="button"/>इसके बजाय <input type="submit"/> केवल तभी काम करेगा जब यह बटन इस रूप में एकमात्र बटन नहीं है।

— Shiala
स्रोत
2
यह jQuery के लिए है, जावास्क्रिप्ट में एक समतुल्य है: myform.onsubmit = function () {return false} ... इसके अलावा, यदि आप सबमिट बटन को हटाते हैं, तो फॉर्म को दूसरे फॉर्म फ़ील्ड से एंटर दबाकर भी सबमिट किया जा सकता है।
— सिंटेक्सिस
10

यह एक html5 त्रुटि है जैसे कहा गया है, आप अभी भी एक सबमिट के रूप में बटन (यदि आप जावास्क्रिप्ट और गैर जावास्क्रिप्ट दोनों उपयोगकर्ताओं को कवर करना चाहते हैं) का उपयोग कर सकते हैं:

     <button type="submit" onclick="return false"> Register </button>

इस तरह आप सबमिट को रद्द कर देंगे लेकिन फिर भी आप जो भी कर रहे हैं वह jquery या javascript function के लिए कर रहे हैं और उन उपयोगकर्ताओं के लिए सबमिट करें, जिनके पास जावास्क्रिप्ट नहीं है।

— sagits
स्रोत
8

मुझे यकीन है कि एफएफ पर 

removeItem

फ़ंक्शन एक जावास्क्रिप्ट त्रुटि का सामना करता है, यह IE पर खुश नहीं है

जब जावास्क्रिप्ट त्रुटि दिखाई देती है तो "रिटर्न झूठा" कोड नहीं चलेगा, जिससे पेजबैक हो जाएगा

— एलिन वासिल
स्रोत
8

गलत रिटर्न डिफ़ॉल्ट व्यवहार को रोकता है। लेकिन वापसी झूठी अतिरिक्त क्लिक घटनाओं की बुदबुदाहट को तोड़ती है। इसका मतलब है कि अगर इस फ़ंक्शन को कॉल करने के बाद कोई अन्य क्लिक बाइंडिंग है, तो अन्य लोग विचार नहीं करते हैं।

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

या बस आप इस तरह डाल सकते हैं

 <button type="submit" onclick="return false"> PostData</button>
— सुनील धप्पधुले
स्रोत
7

बस e.preventDefault();अपनी विधि में जोड़ें अपने पृष्ठ को फ़ॉर्म सबमिट करने से रोकना चाहिए।

function myFunc(e){
       e.preventDefault();
}

एमडीएन वेब डॉक्स के अनुसार

ईवेंट इंटरफ़ेस की रोकडिफॉल्ट () विधि उपयोगकर्ता एजेंट को बताती है कि यदि घटना को स्पष्ट रूप से संसाधित नहीं किया गया है, तो इसकी डिफ़ॉल्ट कार्रवाई को ध्यान में नहीं रखा जाना चाहिए क्योंकि यह सामान्य रूप से होगा। घटना, हमेशा की तरह प्रचार करने के लिए जारी है, जब तक कि अपने श्रोताओं कॉल में से एक stopPropagation ()या stopImmediatePropagation (), या तो जिनमें से प्रचार समाप्त हो जाता है।

— मेलस्मी अली
स्रोत
6

अपने बटन को सामान्य तरीके से सेट करें और Event.preventDefault का उपयोग करें। 

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
— विशाल
स्रोत
4 
return false;

आप फ़ंक्शन के अंत में या फ़ंक्शन कॉल के बाद गलत वापस आ सकते हैं।

जब तक यह अंतिम बात है, तब तक फॉर्म सबमिट नहीं होगा।

— WonderWorker
स्रोत
2

यहाँ एक सरल तरीका है:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
— axiom82
स्रोत
1

निम्न नमूना कोड आपको दिखाता है कि बटन को फ़ॉर्म सबमिट करने से कैसे रोका जाए।

आप मेरा नमूना कोड आज़मा सकते हैं:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
— KNVB
स्रोत
0

मैं अभी इसका परीक्षण करने में सक्षम नहीं हूं, लेकिन मुझे लगता है कि आप jQuery की निवारण विधि का उपयोग कर सकते हैं ।

— टायलर रैश
स्रोत
0

फ़ंक्शन निष्कासन में वास्तव में एक त्रुटि होती है, जो प्रपत्र बटन को डिफ़ॉल्ट व्यवहार (फ़ॉर्म सबमिट करना) करता है। जावास्क्रिप्ट त्रुटि कंसोल आमतौर पर इस मामले में एक संकेतक देगा।

जावास्क्रिप्ट भाग में फ़ंक्शन निष्कासन की जाँच करें:

रेखा:

rows[rows.length-1].html('');

काम नहीं करता है। इसके बजाय यह प्रयास करें:

rows.eq(rows.length-1).html('');
— ylebre
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.