Як зробити щось перед подачею? [зачинено]


141

У мене є форма, яка має кнопку, яка подає форму. Мені потрібно щось зробити, перш ніж відбуватись подання. Я спробував зробити onClick на цій кнопці, але це відбувається після надсилання.

Я не можу поділитися кодом, але, як правило, що мені робити в jQuery або JS, щоб впоратися з цим?



2
@ Брад Крісті, якби тільки я міг прийняти коментар як відповідь. Дякую дуже корисно.
Джиммі

3
Я ненавиджу це, коли stackover закриває питання. Ви можете керувати своїми діями, використовуючи такі події, які запускаються в наступний час безпосередньо перед надсиланням форми: 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit
Shadi Namrouti

1
Я ціную це питання, тому що я зіткнувся з тією ж проблемою зовсім недавно, і саме це питання я хотів задати.
відпрацьований909

2
смішно, що це питання було закрито, оскільки це не справжнє питання: -?
AnnaKlein

Відповіді:


207

Якщо у вас є така форма:

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

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

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

2
У мене виникають проблеми з використанням цього циклу, який потрібно виконати перед надсиланням. Будь-які пропозиції?
Смілян

Є який-небудь код для перегляду? Не впевнений, що розумію проблему.
Ден Брін

3
Чому це завершено в порожній виклик функції? Чи не повинна submitфункція бути здатною прив’язатись безпосередньо до $('#form')без пустої навколишньої функції? EDIT: Документи припускають, що оточуючий виклик функції не потрібен .
ейканал

@eykanal Добре. Я пішов вперед і відредагував відповідь, щоб видалити обгортку функції після підтвердження того, що вона добре працює з видаленою.
Джон Шнайдер

3
@eykanal Я використав "порожній" виклик функції, тому що це скорочення $(document).ready()функції jQuery , що забезпечує завершення DOM перед приєднанням submitподії. Якщо ваш JS знаходиться внизу сторінки, це не обов'язково, але якщо він знаходиться в <head>розділі, тоді він вам потрібен. Дивіться: stackoverflow.com/q/13062246/135108
Dan Breen

23

Припустимо, у вас така форма:

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

</form>

Ви можете прикріпити onsubmit-event за допомогою jQuery так:

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

Якщо ви return falseформа не буде представлена ​​після функції, якщо ви повернете справжню або нічого, вона буде подана як завжди.

Додаткову інформацію див. У документації 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
Але це не працює, коли форма містить, наприклад, поле введення, користувач натискає клавішу повернення, яка запускає подію подання. Зазвичай краще приєднатися безпосередньо до події надсилання, щоб ви могли забезпечити його виклик незалежно від того, як користувач відправив заявку.
акме

2
<input type = "submit" value = "Клацніть" onmouseover = "beforeSubmit ();" />
Ansyori

5

переконайтеся, що кнопка "Надіслати" не має типу "подати", зробіть її кнопкою. Потім використовуйте подію onclick, щоб запустити деякий JavaScript. Там ви можете робити все, що завгодно, перш ніж фактично розмістити свої дані.


3
Форму можна подавати різними способами, наприклад, натисканням клавіші Enter у певних полях. Прив’язування до натискання однієї кнопки, на яку не можна натискати, не є хорошою ідеєю. Інші відповіді показують , як ви зв'яжете onsubmitв формі , яка буде спрацьовувати незалежно від того , як відправить форму.
Джейсон
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.