Вопрос:
У меня есть форма, которая вводит ввод в ZIP-код и перенаправляет пользователя на один из двух URL-адресов в зависимости от ввода. Все работает отлично, когда вы нажимаете кнопку отправки, однако, нажав enter, перезагружает страницу, я прошел через около 30 подобных форумов безрезультатно. Я попробовал несколько вещей, включая изменение типа кнопки отправки с кнопки для отправки. Я попробовал несколько фрагментов, чтобы заставить ключ ввода делать то, что я хочу, но никто из них не работал. Он просто перезагружает страницу. Вот код, который я сейчас на сайте:
<div align=»center»> <script type=»text/javascript»> //<![CDATA[ function zipValidate() { val = document.zipForm.zip.value; switch (val) { case ‘94005’: document.location = ‘http://www.crossborderscheduling.com/home/calendar/’; break; default: document.location = ‘http://crossborder.fedex.com/us/’; break; } } //]]> </script> <form name=»zipForm» id=»zipForm» method=»post»> <input name=»zip» type=»text» id=»zip» maxlength=»5″ size=»10%» placeholder=»Zip Code» /> <input name=»zipButton» type=»button» id=»zipButton» value=»Submit» onclick=»zipValidate()» /> </form> </div> Лучший ответ:
<form> имеет значение по умолчанию [action] of «» что означает, что при отправке формы данные будут отправляться на текущую страницу.
Ваш элемент <input name=»zipButton»…> использует type=»button» вместо type=»submit» и вы привязали к нему обработчик события onclick.
Нажатие на элемент #zipButton фактически не отправляет форму, поэтому ваш zipValidate вызов zipValidate работает.
Нажатие Enter при фокусировке на поле #zip вызовет неявное поведение представления для формы, которое запускает событие submit в элементе form и полностью игнорирует #zipButton вызов клика #zipButton.
Итак, как вы это исправите?
Начнем с исправления HTML:
<form name=»zipForm» id=»zipForm» method=»post»> <input name=»zip» type=»text» id=»zip» maxlength=»5″ size=»10″ placeholder=»Zip Code» aria-label=»Zip Code» /> 1: ^^^^^^^^^ 2: ^^^^^^^^^^^^^^^^^^^^^ <input name=»zipButton» type=»submit» id=»zipButton» value=»Submit» /> 3: ^^^^^^^^^^^^^ 4: ^ </form>
- атрибут [size] должен иметь значение, которое является неотрицательным целым числом
- поскольку вы не используете элемент <label>, важно предоставить ярлык для доступности. Атрибут [placeholder] не является адекватной заменой.
- кнопка должна использовать тип submit
- сохраните свой JavaScript из своего HTML-кода
Теперь, когда HTML был очищен, взгляните на JavaScript:
<script> // 1 ^^^, // 2 function zipValidate() { // 3 var val, action; // 4 val = document.getElementById(‘zip’).value; switch (val) { case ‘94005’: // 5 action = ‘http://www.crossborderscheduling.com/home/calendar/’; break; default: action = ‘http://crossborder.fedex.com/us/’; break; } // 6 this.setAttribute(‘action’, action); } // 7 document.getElementById(‘zipForm’).addEventListener(‘submit’, zipValidate, false); </script>
- не используйте [type=»text/javascript»], это не было необходимо в течение очень долгого времени
- не используйте CDATA, он тоже не нужен в течение очень долгого времени
- объявлять переменные
- не используйте неявные глобальные ссылки по идентификатору, вместо этого запрашивайте DOM с помощью одного из методов поиска DOM: getElementById, getElementsByTagName, getElementsByClassName, querySelector или querySelectorAll
- сохраните URL-адрес, по которому вы хотите отправить форму. Операции if или тройного оператора хватило бы, но я оставил переключатель, потому что это вряд ли имеет значение для этого случая.
- установите атрибут [action] для формы, чтобы сообщить форме, в которой она должна быть отправлена. Вам не нужно вызывать preventDefault для события, потому что поведение представления позаботится о перенаправлении, которое вам нужно.
- привяжите обработчик события к форме из JavaScript. Возможно, вам придется изменить порядок выполнения сценария в DOM или дождаться document.onreadystatechange так что элемент #zipForm существует, когда вы #zipForm связать событие с ним.
Ответ №1
Чтобы предотвратить отправку формы, вам нужно return false в свой код onclick. Для этого вы можете изменить его на:
onclick=»zipValidate() && return false;»
В качестве альтернативы вы можете изменить свою функцию, чтобы вернуть false, а затем изменить onclick на:
onclick=»return zipValidate();»
