Как что-то сделать перед отправкой? [закрыто]

146

У меня есть форма, в которой есть кнопка, которая отправляет форму. Мне нужно что-то сделать перед отправкой. Я пробовал нажать на эту кнопку onClick , но это происходит после отправки.

Я не могу поделиться кодом, но, как правило, что мне делать в jQuery или JS, чтобы справиться с этим?

Джимми
источник
11
cough jsFiddle Пример cough
Брэд Кристи
2
@ Брэд Кристи, если бы я только мог принять комментарий в качестве ответа. Спасибо очень полезно.
Джимми
3
Ненавижу, когда стек закрывает вопрос. Вы можете обрабатывать свои действия, используя следующие события, которые запускаются в следующее время непосредственно перед отправкой формы: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit
Шади Намрути
1
Я ценю этот вопрос, потому что совсем недавно я столкнулся с той же проблемой, и это именно то, что я хотел задать.
Wastetime909
2
забавно, что этот вопрос был закрыт, потому что это не настоящий вопрос: -?
Anna Klein

Ответы:

213

Если у вас есть форма как таковая:

<form id="myform">
...
</form>

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

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});
Дэн Брин
источник
3
У меня проблемы с использованием этого для циклов, которые должны быть завершены перед отправкой. Какие-либо предложения?
Smilyan
Есть код, на который стоит посмотреть? Не уверен, что понимаю проблему.
Дэн Брин
3
Почему это заключено в пустой вызов функции? Разве submitфункция не должна иметь возможность связываться напрямую с $('#form')функцией без окружающей пустой функции? РЕДАКТИРОВАТЬ: документы предполагают, что окружающий вызов функции не нужен .
eykanal 01
@eykanal Хорошее замечание. Я пошел дальше и отредактировал ответ, чтобы удалить оболочку функции, убедившись, что она работает нормально, когда она удалена.
Джон Шнайдер
3
@eykanal Я использовал "пустой" вызов функции, потому что это сокращение для $(document).ready()функции jQuery , которая обеспечивает завершение DOM перед присоединением submitсобытия. Если ваш JS находится внизу страницы, это необязательно, но если он находится в <head>разделе, то он вам нужен. См .: stackoverflow.com/q/13062246/135108
Дэн Брин
23

Предполагая, что у вас есть такая форма:

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Вы можете прикрепить onsubmitсобытие с помощью jQuery следующим образом:

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Если вы return falseне отправите форму после функции, если вы вернете true или ничего, она будет отправлена ​​как обычно.

Дополнительную информацию см. В документации jQuery .

акме
источник
11

Вы можете использовать onclickдля запуска некоторого кода JavaScript или jQuery перед отправкой формы следующим образом:

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />
Джеймс Джонсон
источник
18
Но это не работает, когда форма содержит, например, поле ввода, и пользователь нажимает клавишу возврата, которая запускает событие отправки. Обычно лучше присоединиться непосредственно к событию отправки, чтобы обеспечить его вызов независимо от того, как пользователь запустил отправку.
acme
2
<input type = "submit" value = "Щелкните" onmouseover = "beforeSubmit ();" />
Ansyori 06
5

убедитесь, что кнопка отправки не относится к типу «отправить», сделайте ее кнопкой. Затем используйте событие onclick, чтобы запустить какой-нибудь javascript. Там вы можете делать все, что захотите, прежде чем вы действительно разместите свои данные.

Роджерлсмит
источник
4
Форму можно отправить разными способами, например, нажав клавишу ввода в определенных полях. Привязка к нажатию на одну кнопку, которую нельзя нажать, - не лучшая идея. Другие ответы показывают , как вы свяжете onsubmitв форме , которая будет срабатывать независимо от того , как отправит форму.
Джейсон