Good morning!
The question is how to implement the function of closing a submission form and calling another form after executing the .POST method using ajax. Also, if you tell a newbie about his mistakes, I will be very grateful :)
There is such:
Form validator:
$(document).ready(function() { var patternmail = /^[a-z0-9_-]+@[a-z0-9-]+\.[az]{2,6}$/i; var mail = $('#mail'); var name = $('#firstname'); var lname = $('#lastname'); var phone = $('#phone'); var text = $('#text'); var allInputs = $('#mail, #firstname, #lastname, #phone, #text'); $('.alert-danger').hide(1); allInputs.on('input', function() { var resolution = true; if (mail.val() != '') { if (mail.val().search(patternmail) == 0) { $('#alertmail').hide(1) $('#submit').attr('disabled', false); mail.removeClass('error').addClass('ok'); $('#mail').css('border', 0); } else { $('#alertmail').show(1) $('#mail').css('border', '2px solid #cc3b3b'); mail.addClass('ok'); resolution = false; } } else { mail.addClass('error'); resolution = false; } if (name.val() != '') { if (name.val().length >= 3) { $('#alertname').hide(1) name.removeClass('error').addClass('ok'); $('#firstname').css('border', 0); } else { $('#alertname').show(1) $('#firstname').css('border', '2px solid #cc3b3b'); resolution = false; name.addClass('ok'); } } else { name.addClass('error'); resolution = false; } if (lname.val() != '') { if (lname.val().length >= 3) { $('#alertlname').hide(1) lname.removeClass('error').addClass('ok'); $('#lastname').css('border', 0); } else { $('#alertlname').show(1) $('#lastname').css('border', '2px solid #cc3b3b'); resolution = false; lname.addClass('ok'); } } else { lname.addClass('error'); resolution = false; } if (phone.val() != '') { if (phone.val().length >= 9) { $('#alertphone').hide(1) phone.removeClass('error').addClass('ok'); $('#phone').css('border', 0); } else { $('#alertphone').show(1) $('#phone').css('border', '2px solid #cc3b3b'); resolution = false; phone.addClass('ok'); } } else { phone.addClass('error'); resolution = false; } if (text.val() != '') { if (text.val().length >= 10) { $('#alerttext').hide(1) text.removeClass('error').addClass('ok'); $('#text').css('border', 0); } else { $('#alerttext').show(1) $('#text').css('border', '2px solid #cc3b3b'); resolution = false; text.addClass('ok'); } } else { text.addClass('error'); resolution = false; }; if (resolution === true) { $('#submit').removeAttr('disabled'); } else { $('#submit').attr('disabled', ''); }; }); });The execution of the POST method, the opening of the modal is registered there as well - the sending form disappears, but the modal does not open.
function call() { var msg = $('#formx').serialize(); $.ajax({ type: 'POST', url: 'post.php', data: msg, success: function(data) { $('#contact').hide(1); $('#successmodal').show(1); $('#successmodal').html(data); }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode); } }); }- Post.php
<strong><? $send = $_POST['button']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $mail = $_POST['mail']; $phone = $_POST['phone']; $text = $_POST['text']; if ($send != "button"){ $to = "meowwiza@gmail.com"; // <- Ваша почта $subject = "Письмо с сайта"; // <- Заголовок письма на почте $mailheaders .="От: $mail"; $msg .= "ФИО отправителя: $firstname $lastname\r\n"; $msg .= "E-mail отправителя: $mail\r\n"; $msg .= "Телефон: $phone\r\n"; $msg .= "Сообщение: $text\r\n"; mail ($to, $subject, $msg, $mailheaders); $mess= "Уважаемый $firstname, ваше сообщение было успешно отправленно."; echo '<center><p class="text">' . $mess ; } ?></strong>
Our modalka with the form:
<div id="contact" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <form id="formx" method="post" action="javascript:void(null);" onsubmit="call()"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Обратная связь</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="alert alert-danger" id="alertname" role="alert">Имя введено не корректно.</div> </div> <div class="col-md-6"> <div class="alert alert-danger" id="alertlname" role="alert">Введите фамилию.</div> </div> </div> <div class="row"> <div class="col-md-6"><label class="name">Имя*</label></div> <div class="col-md-6 hidden-xs hidden-sm"><label class="name">Фамилия*</label></div> <div class="col-md-6"><input type="text" class="name" name="firstname" id="firstname"></div> <div class="col-md-6 hidden-md hidden-lg"><label class="name">Фамилия*</label></div> <div class="col-md-6"><input type="text" class="name" name="lastname" id="lastname"></div> </div> <div class="row"> <div class="col-md-12"> <div class="alert alert-danger" id="alertmail" role="alert">Введите адрес электронной почты.</div> </div> </div> <div class="row"> <div class="col-md-12"><label class="name">Почта*</label></div> <div class="col-md-12"><input type="email" class="mail" name="mail" id="mail"></div> </div> <div class="row"> <div class="col-md-12"> <div class="alert alert-danger" id="alertphone" role="alert">Введите телефон.</div> </div> </div> <div class="row"> <div class="col-md-12"><label class="name">Телефон*</label></div> <div class="col-md-12"><input type="text" class="mail" name="phone" id="phone"></div> </div> <div class="row"> <div class="col-md-12"> <div class="alert alert-danger" id="alerttext" role="alert">Введите сообщение.</div> </div> </div> <div class="row"> <div class="col-md-12"><label class="name">Сообщение*</label></div> <div class="col-md-12"><textarea name="text" id="text" cols="30" rows="10"></textarea></div> </div> </div> <div class="modal-footer"> <input class="btn btn-primary" id="submit" type="submit" value="Отправить"> </div> </form> </div> </div> </div> To make it clearer, I attach screenshots and the site itself:
http://test.truskahouses.in.ua/pura/
The form:
After sending the form closes and leaves the page in this form:
