Предотвратить отправку формы и перезагрузку страницы
При заполнении формы, javascrip проверяет поля на пустоту, если поля пустые, выдается алерт.
Проблема в том, что форма находится внизу страницы, а после этого страница перезагружается, т.е. пользователь снова попадает в самое начала. я так понимаю, что данные попадают в обработчик php и из-за этого страница и перезагружается. Скажите, как предотвратить отправку формы, в случае если инпуты не проходят проверку в функции cheker2() Форма: <form action="/" method="POST"> <p><label>Ваше имя:<br/><input id="name2" name="name" type="text"/></label></p> <p><label>Ваш телефон:<br/><input name="tel" id="tel2" type="text"/></label></p> <p id="button_p"><input name="button_f" value="ok" type="image" src="img/okbutton.png" alt="ОК" onClick="cheker2()"></p> </form> Код javascript:
function cheker2()
{
var tel2 = document.getElementById("tel2");
var name2 = document.getElementById("name2");
if(tel2.value=='' || name2.value=='')
{
alert("Заполните все поля");
}
}
|
DmitriSpartak, можно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form action="/" method="POST">
<p><label>Ваше имя:<br/><input id="name2" name="name" type="text"/></label></p>
<p><label>Ваш телефон:<br/><input name="tel" id="tel2" type="text"/></label></p>
<p id="button_p">
<input name="button_f" value="ok" type="image" src="img/okbutton.png" alt="ОК">
</p>
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit', function(e) {
var inpElems = form.querySelectorAll('input[type="text"]'),
result = true;
for(var i = 0; i < inpElems.length; i++) {
if( !inpElems[i].value.match(/^\S+/) ) {
result = false;
e.preventDefault();
}
}
if(!result) alert('Заполните все поля!');
});
</script>
</body>
</html>
|
DmitriSpartak,
function cheker2()
{
var tel2 = document.getElementById("tel2");
var name2 = document.getElementById("name2");
if(tel2.value=='' || name2.value=='')
{
alert("Заполните все поля");
return false;
}
}
|
Выкинуть вот эту шнягу type="image" и вообще никаких кнопок там не рисовать и никуда оно никогда не уйдет без вашего согласия. Кнопку нарисовать вот так:
<a class="btn-submit" onclick="validate(this)">Отправить</a> |
Совет хозяйке. Поле телефона сделайте type="tel" и еще один - поменяйте пост на гет. Для таких примитивных задач POST не нужен. Тогда вам и форма не нужна будет (в общем и для post она не нужна такая). Нарисовали два поля в диве, кнопку а - и скриптом накрыли все.
|
| Часовой пояс GMT +3, время: 22:38. |