Форма отправки и небольшая валидация, формы пересекаються при отправке, как исправить?

Всем привет.

Столкнулся с проблемой, на одной странице три формы, при заполнении и отправки данных с форм, вылезает валидация, но вместо того чтобы у одной формы вылезало, вылезает у всех 3 форм, как это исправить без дублирования скрипта.
Как-то надо сделать чтобы скрипт работал в рамках данной формы в которой я нажимаю отправить данные. А у меня выходит для всех трех форм работает, скрывает форму и выводит валидацию. ))))))))

Форма
<form method="POST" onsubmit="send(event, '------------------------.com/sendsertf.php')" id="formsertf">

<div class="ax-form">
     <input type="hidden" id="srfesrtf" name="srfesrtf" value="Сертификат на дайвинг с тюленями">

        <label>Имя <b>*</b></label>
        <input type="text" id="srfname" name="srfname"  class="inp1" placeholder="Иван Викторович" required>
        <label>Телефон <b>*</b></label>
        <input type="text" id="srftel" name="srftel" class="inp1 srftel" placeholder="+7 (___) ___-__-__" required>
        <label>E-mail<b>*</b></label>
        <input type="text" id="srfemail" name="srfemail" class="inp1" required>
</div>

<div class="ax-result"></div>

<div class="ax-form">
<button type="submit" class="btnno">Отправить</button>
</div>
</form>


Скрипт обработки ошибок
<script>
function send(event, php) {
console.log("Отправка запроса");
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var req = new XMLHttpRequest();
req.open('POST', php, true);
req.onload = function() {
	if (req.status >= 200 && req.status < 400) {
	json = JSON.parse(this.response);
    	console.log(json);
        
    	if (json.result == "success") {
          $('#formsertf .ax-result').removeClass('validdone validerror').addClass('validdone').html('Сообщение отправлено, в ближайшее время с вами свяжется менеджер.');
          $('#formsertf .ax-form').hide();
               
    	} else {
    	  $('#formsertf .ax-result').removeClass('validdone validerror').addClass('validerror').html('Сообщение не отправлено, попробуйте повторить действия позднее.');
          $('#formsertf .ax-form').show();
    	}
    // Если не удалось связаться с php файлом
    } else {alert("Ошибка сервера. Номер: "+req.status);}}; 

// Если не удалось отправить запрос. Стоит блок на хостинге
req.onerror = function() {alert("Ошибка отправки запроса");};
req.send(new FormData(event.target));
}
</script>
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
ws17
@ws17 Автор вопроса
Делюсь решением, помогли уже на freelance хабре.

Тут добавил this
onsubmit="send(event, this, '--------------.com/sendsertf.php')"


В js
function send(event, form, php) { // добавил form

и ниже в вывод вариантов добавил form

if (json.result == "success") {
            $(form).find('.ax-result').removeClass('validdone validerror').addClass('validdone').html('Сообщение отправлено, в ближайшее время с вами свяжется менеджер.');
            $(form).find('.ax-form').hide();
          } else {
            $(form).find('.ax-result').removeClass('validdone validerror').addClass('validerror').html('Сообщение не отправлено, попробуйте повторить действия позднее.');
            $(form).find('.ax-form').show();
          }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы