JavaScript — прекратить обновление страницы формы при отправке

Остановить страницу обновления формы при отправке

Эта проблема становится более сложной, когда вы предоставляете пользователю 2 возможности для отправки формы:

  1. нажав на специальную кнопку
  2. нажав клавишу Enter

В таком случае вам понадобится функция, которая обнаружит нажатую клавишу, в которой вы отправите форму, если нажата клавиша Enter.

И теперь возникает проблема с IE (в любом случае, версия 11). Примечание. Эта проблема не существует ни в Chrome, ни в FireFox!

  • Когда вы нажимаете кнопку отправки, форма отправляется один раз; хорошо.
  • Когда вы нажмете Enter, форма будет отправлена ​​дважды … и ваш сервлет будет выполнен дважды. Если у вас нет серверной архитектуры PRG (post redirect get), результат может быть неожиданным.

Несмотря на то, что решение выглядит тривиально, мне нужно много часов, чтобы решить эту проблему, поэтому я надеюсь, что оно может быть полезным для других людей. Это решение было успешно протестировано, в частности, на IE (v 11.0.9600.18426), FF (v 40.03) и Chrome (v 53.02785.143 m 64 бит)

Исходный код HTML {amp}amp; JS находится во фрагменте. Принцип описан там. Предупреждение:

Вы не можете проверить это во фрагменте, потому что действие post не определено, и нажатие клавиши Enter может помешать работе stackoverflow.

Если вы столкнулись с этой проблемой, просто скопируйте / вставьте код js в свою среду и адаптируйте его к своему контексту.

 /* * inForm points to the form */ var inForm = document.getElementById('idGetUserFrm'); /* * IE submits the form twice * To avoid this the boolean isSumbitted is: * 1) initialized to false when the form is displayed 4 the first time * Remark: it is not the same event as "body load" */ var isSumbitted = false; function checkEnter(e) { if (e {amp}amp;{amp}amp; e.keyCode == 13) { inForm.submit(); /* * 2) set to true after the form submission was invoked */ isSumbitted = true; } } function onSubmit () { if (isSumbitted) { /* * 3) reset to false after the form submission executed */ isSumbitted = false; return false; } } 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()"{amp}gt; First name:{amp}lt;br{amp}gt; {amp}lt;input type="text" name="firstname" value="Mickey"{amp}gt; {amp}lt;input type="submit" value="Submit"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector