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




html forms (10)

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

<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>

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

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

   In function...

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

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

<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 विधि कॉल करने का प्रयास किया - इसने अपवाद फेंक दिया, जिसके परिणामस्वरूप बटन के लिए डिफ़ॉल्ट व्यवहार हुआ।

एफडब्ल्यूआईडब्ल्यू, एक और तरीका है जिसके साथ आप जा सकते हैं ... jQuery का उपयोग करके अपने ईवेंट हैंडलर को preventDefault() करें, और डिफ़ॉल्ट व्यवहार को आगे बढ़ाने के लिए jQuery की event ऑब्जेक्ट पर 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>

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


कुछ समय पहले मुझे कुछ बहुत ही समान चाहिए ... और मुझे मिल गया।

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

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

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

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

<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="button" लिए type="submit" बदलता हूं, तो ऐसा लगता है लेकिन काम नहीं करता है। यह कभी भी फॉर्म भेजता नहीं है, लेकिन इसे आसानी से किया जा सकता है।

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

<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="" सिर्फ पोस्ट डेटा पर दिखने के लिए है।

इस तरह से यह काम करता है जैसा कि मुझे चाहिए।

मैंने इसे सिर्फ उन लोगों के लिए रखा है जिन्हें फॉर्म पर कोई 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"type="submit" ) फॉर्म सबमिट करने से पहले वैधता की जाती है और यदि मान्य नहीं भेजा जाता है।

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


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

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

 <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>

मान लें कि आपके एचटीएमएल फॉर्म में id="form_id"

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

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

$("#form_id").submit(function(){
  return false;
});

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

removeItem 

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

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


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

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

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


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

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

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


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


return false;

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

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






submit