Много (6шт) форм на одной странице. Как?

[pawel1812]

Проблема тривиальная, как я посмотрел на форуме, но решения так и не нашел, подскажите что где нужно дописать или переделать. Заранее благодарен!
есть рабочая форма

<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>

[Erolast]

Ибо один и тот же идентификатор может быть только у одного элемента на странице.

[pawel1812]

if (document.getElementById('fio1').value==""){
04	    document.getElementById('err_fio1').innerHTML='Введите ваше имя';
05	        return false;

спасибо конечно за помощь , тока мне решение надо, я ничо в js не понимаю
где че изменить то, getElementById на getElementByclass, ???

[Erolast]

А не лучше ли найти какого-нибудь программиста, чем пытаться выполнить не свою работу?)
В 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>

Так пять раз.

[pawel1812]

да я блин так и пробовал делать fio1, 2, 3, и тд, но работает только одна форма, которая первая, то есть заполняю форму фио 4, а срабатывает форма 1,

[pawel1812]

это ж, если я правильно понимаю под каждой формой свой обработчик, со своими идентификаторами, но чет никак, мистика, или я чет не так делаю, как обычно)))

[pawel1812]

то есть не обработчик а скрипт проверки полей

[Erolast]

А, тьфу, невнимательно прочитал. Нельзя этот код повторять - получается, что функция просто каждый раз заново переопределяется.
Сделай так:

<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>

При этом скрипт оставляешь на странице один, а формы копируешь сколько влезет.

[pawel1812]

да, спасибо огромное, так работает,

а такой вопрос, а форме можно как нибудь придать индивидуальности, ну то есть чтобы понимать с какой именно формы была отправка, может что то в самом обработчике нужно добавить

[Erolast]

Конечно. Приписываешь в форму 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, можешь получить значение этого поля точно так же, как и всех остальных.