Много (6шт) форм на одной странице. Как?
Проблема тривиальная, как я посмотрел на форуме, но решения так и не нашел, подскажите что где нужно дописать или переделать. Заранее благодарен!
есть рабочая форма
<form onsubmit="return checkForm(this)" action="forms/form1.php" method="post" class="form1" >
<p><span>Отправьте заявку</span> сейчас и получите доставку Бесплатно</p>
<input type="text" value="" name="fio1" id="fio1" class="input-chel" >
<div id='err_fio1' class='error1'></div>
<input type="text" value="" name="phone1" id="phone1" class="input-coll" >
<div id='err_phone1' class='error1'></div>
<input id="submit-form1" type="submit" class="input-submit" value="" >
</form>
и такой же рабочий скрипт, но только если делать в одном экземпляре
<script type="text/javascript">
function checkForm(form){
if (document.getElementById('fio1').value==""){
document.getElementById('err_fio1').innerHTML='Введите ваше имя';
return false;
}
else {
document.getElementById('err_fio1').innerHTML="";
};
if (document.getElementById('phone1').value==""){
document.getElementById('err_phone1').innerHTML='Введите номер телефона';
return false;
}
else {
document.getElementById('err_phone1').innerHTML="";
};
return true;
};
</script>
|
Ибо один и тот же идентификатор может быть только у одного элемента на странице.
|
if (document.getElementById('fio1').value==""){
04 document.getElementById('err_fio1').innerHTML='Введите ваше имя';
05 return false;
спасибо конечно за помощь:) , тока мне решение надо, я ничо в js не понимаю где че изменить то, getElementById на getElementByclass, ??? |
А не лучше ли найти какого-нибудь программиста, чем пытаться выполнить не свою работу?)
В HTML заменить все id на новые. Вот так:
<form onsubmit="return checkForm(this)" action="forms/form1.php" method="post" class="form1" >
<p><span>Отправьте заявку</span> сейчас и получите доставку Бесплатно</p>
<input type="text" value="" name="fio1" id="fio2" class="input-chel" >
<div id='err_fio2' class='error1'></div>
<input type="text" value="" name="phone1" id="phone2" class="input-coll" >
<div id='err_phone2' class='error1'></div>
<input id="submit-form1" type="submit" class="input-submit" value="" >
</form>
И то же самое в JS:
<script type="text/javascript">
function checkForm(form){
if (document.getElementById('fio2').value==""){
document.getElementById('err_fio2').innerHTML='Введите ваше имя';
return false;
}
else {
document.getElementById('err_fio2').innerHTML="";
};
if (document.getElementById('phone2').value==""){
document.getElementById('err_phone2').innerHTML='Введите номер телефона';
return false;
}
else {
document.getElementById('err_phone2').innerHTML="";
};
return true;
};
</script>
Так пять раз. |
да я блин так и пробовал делать fio1, 2, 3, и тд, но работает только одна форма, которая первая, то есть заполняю форму фио 4, а срабатывает форма 1,
|
это ж, если я правильно понимаю под каждой формой свой обработчик, со своими идентификаторами, но чет никак, мистика, или я чет не так делаю, как обычно)))
|
то есть не обработчик а скрипт проверки полей
|
А, тьфу, невнимательно прочитал. Нельзя этот код повторять - получается, что функция просто каждый раз заново переопределяется.
Сделай так:
<script type="text/javascript">
function checkForm(form){
var result = true;
if (form.fio1.value==""){
form.getElementsByClassName("error1")[0].innerHTML='Введите ваше имя';
result = false;
}
else {
form.getElementsByClassName("error1")[0].innerHTML='';
};
if (form.phone1.value==""){
form.getElementsByClassName("error2")[0].innerHTML='Введите номер телефона';
result = false;
}
else {
form.getElementsByClassName("error2")[0].innerHTML='';
};
return result;
};
</script>
<form onsubmit="return checkForm(this)" action="forms/form1.php" method="post" class="form1" >
<p><span>Отправьте заявку</span> сейчас и получите доставку Бесплатно</p>
<input type="text" value="" name="fio1" class="input-chel" >
<div class='error1'></div>
<input type="text" value="" name="phone1" class="input-coll" >
<div class='error2'></div>
<input type="submit" class="input-submit" value="" >
</form>
При этом скрипт оставляешь на странице один, а формы копируешь сколько влезет. |
да, спасибо огромное, так работает,
а такой вопрос, а форме можно как нибудь придать индивидуальности, ну то есть чтобы понимать с какой именно формы была отправка, может что то в самом обработчике нужно добавить |
Конечно. Приписываешь в форму input типа hidden и пихаешь туда идентификатор.
<form onsubmit="return checkForm(this)" action="forms/form1.php" method="post" class="form1" > <p><span>Отправьте заявку</span> сейчас и получите доставку Бесплатно</p> <input type="text" value="" name="fio1" class="input-chel" > <div class='error1'></div> <input type="text" value="" name="phone1" class="input-coll" > <div class='error2'></div> <input type="hidden" name="identifier" value="form_1" /> <input type="submit" class="input-submit" value="" > </form> Дальше, на стороне сервера, в скрипте form1.php, можешь получить значение этого поля точно так же, как и всех остальных. |
| Часовой пояс GMT +3, время: 15:28. |