Вопрос:

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

javascript html forms button submit

567887 просмотра

17 ответа

3849 Репутация автора

На следующей странице в 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>
Автор: Khanpo Источник Размещён: 31.05.2009 07:16

Ответы (17)


572 плюса

130405 Репутация автора

Установите тип для ваших кнопок:

<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, и используйте метод protectDefault () в объекте события 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и обрабатывая события на стороне сервера - это называется ненавязчивым JavaScript .

Автор: Shog9 Размещён: 31.05.2009 07:22

7 плюса

1239 Репутация автора

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

removeItem 

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

При появлении ошибки javascript код «false false» не запустится, что заставит страницу выполнить обратную передачу

Автор: Alin Vasile Размещён: 31.05.2009 07:24

24 плюса

10648 Репутация автора

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

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

Согласно w3schools , <button>теги по-разному работают в разных браузерах.

Автор: poundifdef Размещён: 31.05.2009 07:28

0 плюса

3022 Репутация автора

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

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

Линия:

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

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

rows.eq(rows.length-1).html('');
Автор: ylebre Размещён: 31.05.2009 07:39

0 плюса

940 Репутация автора

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

Автор: Tyler Rash Размещён: 31.05.2009 07:39

28 плюса

1001 Репутация автора

Некоторое время назад мне нужно что-то очень похожее ... и я получил это.

Итак, что я здесь изложу, так это то, как я делаю трюки, чтобы форма могла быть отправлена ​​с помощью 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функции в форме, но делают некоторую проверку, когда пользователь нажимает кнопку.

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

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

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

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

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

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

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

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

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

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

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

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()помощью JavaScript.

Автор: z666zz666z Размещён: 21.03.2012 09:29

1496 плюса

16440 Репутация автора

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

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

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

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

знак равно

Автор: Metafaniel Размещён: 31.05.2012 02:56

14 плюса

383 Репутация автора

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

Автор: Shiala Размещён: 27.06.2012 03:39

3 плюса

427 Репутация автора

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

$('.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 Размещён: 07.01.2014 03:19

9 плюса

3469 Репутация автора

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

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

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

Автор: sagits Размещён: 17.01.2014 01:27

2 плюса

5331 Репутация автора

return false;

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

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

Автор: Knickerless-Noggins Размещён: 04.03.2014 12:30

17 плюса

2361 Репутация автора

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

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

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

$("#form_id").submit(function(){
  return false;
});
Автор: Prateek Joshi Размещён: 24.06.2015 04:46

1 плюс

920 Репутация автора

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

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

 <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>
Автор: The KNVB Размещён: 15.02.2017 07:39

2 плюса

151 Репутация автора

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

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

   In function...

   function myFunc(e){
       e.preventDefault();
   }
Автор: Vishal Размещён: 09.04.2018 08:03

10 плюса

1056 Репутация автора

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

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

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

            return false;
    });});
Автор: Ata Iravani Размещён: 26.05.2018 06:30

-1 плюса

134 Репутация автора

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

если мы используем плагин проверки 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');
}

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

Автор: Sathish Thangaraj Размещён: 29.08.2018 08:55

0 плюса

101 Репутация автора

Возвращение 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>
Автор: Sunil Dhappadhule Размещён: 15.04.2019 12:13
Вопросы из категории :
32x32