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

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

ОТВЕТЫ

Ответ 1

Вы используете элемент кнопки HTML5. Помните, причина в том, что эта кнопка имеет поведение по умолчанию для submit, как указано в спецификации W3, как показано здесь: W3C HTML5

Поэтому вам нужно явно указать его тип:

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

чтобы переопределить тип отправки по умолчанию. Я просто хочу указать, почему это происходит =)

=)

Ответ 2

Установите тип на кнопках:

<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() на jQuery event объект, чтобы отменить начальное поведение по умолчанию:

$(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 и обработать событие server-side - это ненавязчивый JavaScript .

Ответ 3

Когда-то мне было нужно что-то очень похожее... и я понял.

Итак, что я здесь делаю, так это то, как я делаю трюки, чтобы иметь форму, которая может быть отправлена ​​JavaScript без проверки и выполнения проверки только тогда, когда пользователь нажимает кнопку (обычно кнопку отправки).

В этом примере я буду использовать минимальную форму, только с двумя полями и кнопкой отправки.

Помните, что нужно: Из JavaScript он должен быть представлен без проверки. Однако, если пользователь нажимает такую ​​кнопку, валидация должна быть выполнена и отправлена ​​форма, только если пройти проверку.

Обычно все начиналось бы с чего-то рядом (я удалял все лишние вещи неважно):

<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; есть, я также добавляю предложение отправки JavaScript, что-то похожее на это:

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

id="" предназначен только для JavaScript getElementById, name="" предназначен только для того, чтобы он отображался в данных POST.

Таким образом, он работает так, как мне нужно.

Я помещаю это только для людей, которым не нужна функция onsubmit в форме, но сделайте некоторую проверку, когда кнопка нажата пользователем.

Почему мне не нужно вводить onsubmit в теге формы? Легко, на других частях JavaScript мне нужно выполнить отправку, но я не хочу, чтобы там была какая-либо проверка.

Причина: если пользователь является тем, который выполняет отправку, которую я хочу, и вам нужно выполнить проверку, но если это JavaScript, мне иногда нужно выполнить отправку, в то время как такие проверки могут ее избежать.

Это может показаться странным, но не тогда, когда вы думаете, например: о входе в систему... с некоторыми ограничениями... например, не позволяйте использовать сеансы PHP и ни куки файлы не разрешены!

Поэтому любая ссылка должна быть преобразована в такую ​​форму submit, поэтому данные входа не будут потеряны. Когда логин еще не сделан, он также должен работать. Поэтому никакие проверки не должны выполняться по ссылкам. Но я хочу представить сообщение пользователю, если пользователь не ввел оба поля, пользователь и пароль. Так что, если его нет, форма не должна быть отправлена! есть проблема.

См. проблему: форма не должна отправляться, когда одно поле пуст, только если пользователь нажал кнопку, если это код JavaScript, он должен быть отправлен.

Если я выполняю работу над onsubmit в теге формы, мне нужно будет знать, является ли это пользователем или другим JavaScript. Поскольку никакие параметры не могут быть переданы, это невозможно напрямую, поэтому некоторые люди добавляют переменную, чтобы указать, нужно ли делать валидацию или нет. Первым делом в функции проверки является проверка этого значения переменной и т.д. Слишком сложно, и код не говорит, что действительно нужно.

Таким образом, решение не должно иметь onsubmit в теге формы. Insead поместите его там, где это действительно необходимо, на кнопку.

С другой стороны, зачем ставить код onsubmit, так как концептуально я не хочу, чтобы он прошел проверку. Мне действительно нужна проверка кнопок.

Не только код более понятен, но и там, где он должен быть. Просто запомните это: - Я не хочу, чтобы JavaScript проверял форму (которая всегда должна выполняться PHP на стороне сервера) - Я хочу показать пользователю сообщение о том, что все поля не должны быть пустыми, для чего нужен JavaScript (клиентская сторона)

Итак, почему некоторые люди (подумайте или скажите), это должно быть сделано при проверке onsumbit? Нет, концептуально я не делаю проверку onsumbit на стороне клиента. Я просто что-то нажимаю на кнопку, поэтому почему бы просто не позволить этому реализовать?

Хорошо, что код и стиль отлично подходят. На любом JavaScript, который мне нужно отправить, я просто поставил:

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

И это пропускает проверку, когда мне это не нужно. Он просто отправляет форму и загружает другую страницу и т.д.

Но если пользователь нажимает кнопку отправки (aka type="button" not type="submit"), проверка выполняется до того, как отправить форму и если она не действительна не отправлена.

Надеюсь, это поможет другим не пытаться использовать длинный и сложный код. Просто не используйте onsubmit, если это не нужно, и используйте onclick. Но просто не забудьте изменить type="submit" на type="button" и, пожалуйста, не забудьте сделать submit() JavaScript.

Ответ 4

Я согласен с Shog9, хотя вместо этого я мог бы использовать:

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

В соответствии с w3schools тег <button> имеет различное поведение в разных браузерах.

Ответ 5

Предположим, что ваша форма HTML имеет id="form_id"

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

Добавьте этот фрагмент jQuery в свой код, чтобы увидеть результат,

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

Ответ 6

$("form").submit(function () { return false; }); что предотвратит отправку кнопки или вы можете просто изменить тип кнопки на "button" <input type="button"/> вместо <input type="submit"/> Это будет работать, только если эта кнопка не является единственной кнопкой в ​​этой форме.

Ответ 7

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

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

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

            return false;
    });});

Ответ 8

Это ошибка html5, как было сказано, у вас все еще есть кнопка в качестве submit (если вы хотите охватить как пользователей javascript, так и не javascript), используя ее, например:

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

Таким образом вы отмените отправку, но по-прежнему выполняете все, что вы делаете в jquery или javascript function`s, и отправляете для пользователей, у которых нет javascript.

Ответ 9

Я уверен, что на FF

removeItem

функция встречает ошибку JavaScript, это не произошло в IE

При появлении ошибки javascript код "return false" не будет запущен, что сделает страницу обратной почтой

Ответ 10

Здесь простой подход:

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

});

Ответ 11

return false;

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

Пока это последнее, что происходит, форма не будет отправляться.

Ответ 12

Установите свою кнопку обычным способом и используйте event.preventDefault, как..

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

   In function...

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

Ответ 13

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

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

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

Ответ 14

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

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

Строка:

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

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

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

Ответ 15

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

Ответ 16

Возвращение 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>

Ответ 17

я решил эту проблему тремя способами, это поможет вам

если мы используем плагин проверки JQuery в

$("form").validate({
      submitHandler: function (form) {
                     console.log('test');
                          }
                      });

2-й метод, использующий предотвращение по умолчанию

    $( "form" ).submit(function( event ) {

      event.preventDefault();
console.log('test');
    });

3-е использование javscript (событие onsubmit)

если мы используем событие onsubmit внутри тега формы, вместо этого запускается URL, если мы используем onsubmit в кнопке или вводе, который имеет тип = submit

<button type="submit" onsubmit="submitfunction()">submit</button>
    function submitfunction(event){
event.preventDefault();
console.log('test');
}

надеюсь, это поможет