Много (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, время: 10:14. |