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

917

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

javascript html forms button submit Khanpo
источник

какой ответ порекомендуете пожалуйста?

Санепете

1799

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

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

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

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

знак равно

Metafaniel
источник

17

Я также хотел бы отметить, что элемент HTML, имеющий атрибут type, одним из типов которого является кнопка , не должен иметь f # $ 'n тип отправки по умолчанию . Это просто идиотизм, и огромная ошибка в спецификации. Я постоянно использую кнопки в формах, и даже если бы это был крайний случай (а это не так), все равно было бы целесообразно, чтобы тип по умолчанию передавался.

dudewad

3

Most Я провел большую часть этой недели, раздраженный тем, что мое приложение Electron «обновилось», когда я открывал модальное окно с помощью кнопки в форме. Это случилось бы однажды, и тогда приложение повело себя, как я и ожидал. Я понятия не имел, что происходит. Это было оно! У меня нет проблем с типом отправки по умолчанию. Это кажется чем-то вроде ошибки, хотя, учитывая, что мне потребовалось пять лет, чтобы узнать об этом.

freethebees

4

Благодаря вашей справке, я только что узнал, что есть тип = сброс для формы. Потрясающие!

Дуонг Нгуен

602

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

<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
источник

4

type = "button" не всегда работает в Firefox для меня. Если js достаточно сложный и есть ошибка, Firefox все равно отправит форму. Безумие!

Мэтью Лок

1

@ MatthewLock: Вряд ли - ошибка в скрипте просто отключает этот блок кода, и действие продолжается как обычно. Попробуйте вызвать методы событий jQuery e.preventDefault () и / или e.stopPropgation () в качестве первых строк метода. См. Stackoverflow.com/questions/2017755/… чтобы узнать больше

brichins

8

Кнопка type = никогда не должна отправлять форму, несмотря ни на что

Мэтью Локк

1

return falseэто так важно. иногда даже использовать его для кнопки отправки ( onclick）

Jamie

7

Я думаю, что HTML здесь странно. По умолчанию это должно быть type = "button", а не отправка. Для меня всегда неожиданно видеть эту отправку по умолчанию. Это исключение.

httpste

31

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

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

28

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

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

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

poundifdef
источник

18

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

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

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

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

Пратик Джоши
источник

18

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

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

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

            return false;
    });});

Ата Иревани
источник

2

e.preventDefault(); e.stopPropagation();достаточно для вещей, чтобы работать. e.stopImmediatePropagation()это приводит к ошибке неопределенного метода в Chrome.

Subroto

14

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

Shiala
источник

2

Это для jQuery, эквивалент в Javascript: myform.onsubmit = function () {return false} ... также, даже если вы удалите кнопку отправки, форму также можно отправить, нажав клавишу ввода из другого поля формы.

Synexis

10

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

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

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

sagits
источник

8

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

removeItem

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

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

Алин Василе
источник

8

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

Сунил Дхаппадхуле
источник

7

Просто добавьте e.preventDefault();в ваш метод должен препятствовать вашей странице от отправки форм.

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

По данным MDN Web Docs

Метод protectDefault () интерфейса Event сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно приниматься во внимание, как обычно. Событие продолжает распространяться как обычно, если только один из его слушателей не вызывает stopPropagation ()или stopImmediatePropagation ()ни один из них не прекращает распространение.

Мселми Али
источник

6

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

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

   In function...

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

Вишал
источник

4

return false;

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

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

Чудотворец
источник

2

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

$('.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
источник

1

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

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

 <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

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

Тайлер Раш
источник

0

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

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

Линия:

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

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

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

ylebre
источник

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

Ответы: