Such a problem, when you send the form, the "Thank you" window should pop up, but instead, it flips to the empty page of the php handler. If action = "mail.php" is removed from the form, the form does not arrive in the mail and the main page is updated. What should I do? I have already tried a lot. Form Code:

<form class="form" method="post" action="mail.php" id="form"> <div class="inputs"> <input type="text" name="name" id="inpt" placeholder="ИМЯ" required><br> <input type="text" name="email" id="inpt" placeholder="E-MAIL" required><br> <input type="text" name="phone" id="inpt" placeholder="НОМЕР ТЕЛЕФОНА" required><br> <select name="comfort" id="inpt"> <option disabled selected>УДОБНАЯ ФОРМА СВЯЗИ</option> <option value="E-MAIL">E-MAIL</option> <option value="PHONE">По телефону</option> <option value="whatsapp">WhatsApp</option> <option value="telegram">Telegram</option> <option value="viber">Viber</option> </select><br> <select name="question" id="inpt"> <option disabled selected>ПО ВОПРОСУ</option> <option value="visitka">Создание визитки</option> <option value="listovka">Создание листовок</option> <option value="baner">Создание баннера</option> <option value="site">Создание сайта</option> <option value="art">Создание арта</option> </select> </div> <div class="soobch"> <textarea type="text" name="message" id="message" placeholder="Введите сообщение"></textarea> </div> <!--<div class="buton" id="buton"><img src="img/send.png" height="70px" width="auto"></div>--> <input type="submit" name="submit" class="buton" id="buton"> </form> <div class="overlay js-overlay-thank-you"> <div class="popup js-thank-you"> <h2>Спасибо за заявку. Мы свяжемся с вами в ближайшее время!</h2> <div class="close-popup js-close-thank-you"></div> </div> </div> </div>

JS Script Code

 $(document).ready(function() { $("#form").submit(function(){ if(document.form.name.value == '' || document.form.email.value == '' || document.form.phone.value == ''){ valid = false; return valid; } $.ajax({ type: "POST", url: "../mail.php", data: $(this).serialize() }).done(function(){ $(".js-overlay-thank-you").fadeIn(); $(this).find("input").val(''); $("#form").trigger("reset"); }); return false; }); }); //закрыть форму $(".js-close-thank-you").click(function() { $(".js-overlay-thank-you").fadeOut(); }); $(document).mouseup(function (e) { var popup = $(".popup"); if (e.target!=popup[0]&&popup.has(e.target).length === 0){ $(".js-overlay-thank-you").fadeOut(); } });

e.preventDefault (); also does not help. I do not understand what to do?

  • Did you specify this with the handler parameter? no errors in the console? - teran
  • event.preventDefault (); need to put in the form submit - Kostiantyn Okhotnyk
  • How exactly do this? - Glechik

1 answer 1

Wrong way to get document.form . It should be like this: document.getElementById('form') . It is also necessary to use e.preventDefault(); , receiving e by the kollbek argument so that submit does not lead to another page. Corrections needed (I cite all js code):

 $(document).ready(function() { $("#form").submit(function(e){ e.preventDefault(); if(document.getElementById('form').name.value == '' || document.getElementById('form').email.value == '' || document.getElementById('form').phone.value == ''){ valid = false; return valid; } $.ajax({ type: "POST", url: "mail.php", data: $(this).serialize(), success: function(data){ $(".js-overlay-thank-you").fadeIn(); $(this).find("input").val(''); $("#form").trigger("reset"); }, error: function(jqXHR, exception) { console.log(jqXHR); console.log(exception); } }); return; }); }); //закрыть форму $(".js-close-thank-you").click(function() { $(".js-overlay-thank-you").fadeOut(); }); $(document).mouseup(function (e) { var popup = $(".popup"); if (e.target!=popup[0]&&popup.has(e.target).length === 0){ $(".js-overlay-thank-you").fadeOut(); } });
  • Comments are not intended for extended discussion; conversation moved to chat . - Yuriy SPb ♦