Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Много (6шт) форм на одной странице. Как? (https://javascript.ru/forum/events/47013-mnogo-6sht-form-na-odnojj-stranice-kak.html)

pawel1812 05.05.2014 08:28

Много (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>

Erolast 05.05.2014 08:35

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

pawel1812 05.05.2014 08:42

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


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

Erolast 05.05.2014 09:00

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

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

pawel1812 05.05.2014 09:43

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

pawel1812 05.05.2014 09:44

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

Erolast 05.05.2014 09:58

А, тьфу, невнимательно прочитал. Нельзя этот код повторять - получается, что функция просто каждый раз заново переопределяется.
Сделай так:
<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 05.05.2014 11:29

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

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

Erolast 05.05.2014 12:42

Конечно. Приписываешь в форму 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, время: 13:05.