javascript - type - submit form jquery

كيفية منع الأزرار من تقديم النماذج (10)

اضبط الزر الخاص بك بالطريقة العادية واستخدم event.preventDefault مثل ..

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

   In function...

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

في الصفحة التالية ، مع زر Firefox ، يقوم زر الإزالة بإرسال النموذج ، ولكن لا يعمل زر الإضافة. كيف أمنع زر الإزالة من إرسال النموذج؟

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

أنا متأكد من أن FF على

removeItem

وظيفة تواجه خطأ جافا سكريبت ، وهذا لن يحدث على IE

عندما يظهر خطأ javascript لن يتم تشغيل رمز "return false" ، مما يجعل الصفحة للإعادة

أوافق على Shog9 ، على الرغم من أنني قد أستخدم بدلاً من ذلك:

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

وفقًا لـ w3schools ، فإن علامة <button> لها سلوك مختلف على متصفحات مختلفة.

تحتوي الدالة removeItem فعليًا على خطأ ، مما يجعل زر النموذج يعمل بشكل افتراضي (إرسال النموذج). عادةً ما تعطي وحدة تحكم الخطأ في جافا سكريبت مؤشرًا في هذه الحالة.

تحقق من وظيفة removeItem في الجزء javascript:

الخط:

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

لا يعمل. جرب هذا بدلا من ذلك:

rows.eq(rows.length-1).html('');

قم بتعيين النوع على الأزرار الخاصة بك:

<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');
  }
}

لاحظ التغيير: استخرج الكود الأصلي الخاص بك عنصر HTML من مجموعة jQuery ، ثم حاول استدعاء طريقة jQuery عليه - هذا رمى استثناء ، مما أدى إلى السلوك الافتراضي للزر.

FWIW ، هناك طريقة أخرى يمكن أن تذهب بها مع هذا ... اسحب معالجات الأحداث الخاصة بك باستخدام jQuery ، واستخدم الأسلوب preventDefault() على كائن event jQuery لإلغاء السلوك الافتراضي المُقدم:

$(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 ومعالجة جانب خادم الحدث - وهذا معروف وجافا سكريبت غير مزعجة .

لا يمكنني اختبار ذلك الآن ، ولكنني أعتقد أنه يمكنك استخدام طريقة preventDefault() jQuery في preventDefault() .

هذا خطأ في html5 كما قيل ، لا يزال بإمكانك استخدام الزر كإرسال (إذا كنت تريد تغطية كل من مستخدمي جافا سكريبت وغير جافا سكريبت) باستخدامه مثل:

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

وبهذه الطريقة ، ستقوم بإلغاء الإرسال ولكن ستفعل كل ما تقوم به في jquery أو javascript function وسيقوم بتقديمها للمستخدمين الذين ليس لديهم javascript.

وإليك طريقة بسيطة:

$('.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;

});

$("form").submit(function () { return false; }); التي تمنع الزر من الإرسال أو يمكنك فقط تغيير نوع الزر إلى "زر" <input type="button"/> بدلاً من <input type="submit"/> التي لن تعمل إلا إذا كان هذا الزر ليس زر فقط في هذا النموذج.

return false;

يمكنك إرجاع false في نهاية الدالة أو بعد استدعاء الدالة.

وطالما أنه آخر شيء يحدث ، لن يتم إرسال النموذج.