Как запретить кнопкам отправлять формы - PullRequest
Новая
       37

Как запретить кнопкам отправлять формы

790 голосов
/ 31 мая 2009

На следующей странице с 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>

Ответы [ 16 ]

3 голосов
/ 04 марта 2014 
return false;

Вы можете вернуть false в конце функции или после вызова функции.

До тех пор, пока происходит последнее, форма не будет отправлена.

2 голосов
/ 15 апреля 2019

Возвращение false предотвращает поведение по умолчанию. но возвращаемое ложное прерывает всплеск дополнительных событий щелчка. Это означает, что если после вызова этой функции есть другие привязки кликов, другие не учитывают. 

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

Или просто можно поставить вот так 

 <button type="submit" onclick="return false"> PostData</button>
2 голосов
/ 07 января 2014

Вот простой подход: 

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

});
1 голос
/ 15 февраля 2017

В следующем примере кода показано, как запретить отправку формы нажатием кнопки.

Вы можете попробовать мой пример кода: 

 <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>
0 голосов
/ 31 мая 2009

Я не могу проверить это прямо сейчас, но я думаю, вы могли бы использовать метод jQuery protectDefault .

0 голосов
/ 31 мая 2009

Функция removeItem фактически содержит ошибку, из-за которой кнопка формы выполняет свое поведение по умолчанию (отправка формы). В этом случае консоль ошибок JavaScript обычно дает указатель.

Проверьте функцию removeItem в части JavaScript:

Линия: 

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

не работает. Попробуйте вместо этого: 

rows.eq(rows.length-1).html('');
Страница:
...