A
A
Anton2021-07-01 15:23:56
JavaScript
Anton, 2021-07-01 15:23:56

Submission form and small validation, forms intersect when submitting, how to fix?

Hello.

I ran into a problem, there are three forms on one page, when filling out and sending data from the forms, validation comes out, but instead of one form getting out, all 3 forms get out, how to fix it without duplicating the script.
Somehow I need to make the script work within the framework of this form in which I click submit data. And it works for me for all three forms, hides the form and displays validation. ))))))))

Form

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


Error Handling Script
<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton, 2021-07-01
Websaytovsky @ws17

I share the solution , they already helped on freelance hub.
Added this here

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();
          }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question