|
Ajax форма обратной связи ломает поиск по сайту
Здравствуйте, вот код js формы:
$(document).ready(function () {
$("form").submit(function () {
var formID = $(this).attr('id');
var formNm = $('#' + formID);
$.ajax({
type: "POST",
url: 'modalform/mail.php',
data: formNm.serialize(),
success: function (data) {
$('.msgs').html(data);
$('.formTitle').css("display","none");
$(formNm).css("display","none");
setTimeout(function(){
$(formNm).css("display","block");
$('.formTitle').css("display","block");
$('.msgs').html('');
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
},
error: function (jqXHR, text, error) {
$('.msgs').html(error);
$('.formTitle').css("display","none");
$(formNm).css("display","none");
setTimeout(function(){
$(formNm).css("display","block");
$('.formTitle').css("display","block");
$('.msgs').html('');
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
}
});
return false;
});
var $input = $('.form-fieldset > input');
$input.blur(function (e) {
$(this).toggleClass('filled', !!$(this).val());
});
});
Вот сама форма:
<div class="remodal" data-remodal-id="firstModal" data-remodal-options="hashTracking: false,closeOnConfirm: false">
<button data-remodal-action="close" class="remodal-close"></button>
<div class="formArea">
<p class="formTitle">Запись через сайт является предварительной. Наш сотрудник свяжется с Вами для подтверждения записи к специалисту.<br/>Поля помеченные <span style="color:red;">*</span> обязательны для заполнения.</p>
<p class="msgs"></p>
<form id="firstForm" class="form" autocomplete="off">
<fieldset class="form-fieldset ui-input __first">
<label for="username">
<span data-text="Введите ваше Ф.И.О.:">Введите ваше Ф.И.О.<span style="color:red;">*</span>:</span>
</label>
<input name="uname" type="text" id="username" required="required" placeholder="Введите ваше Ф.И.О." tabindex="0" />
</fieldset>
<fieldset class="form-fieldset ui-input __first">
<label for="userphone">
<span data-text="Введите ваш телефон*:">Введите ваш телефон<span style="color:red;">*</span>:</span>
</label>
<input name="uphone" type="tel" class="plugin__input plugin__input_jmp" required="required" placeholder="+7" maxlength="16" id="userphone" tabindex="0" />
</fieldset>
<fieldset class="form-fieldset ui-input __first">
<label for="staff">
<span data-text="Специалист:">Специалист:</span>
</label>
<input name="ustaff" type="text" class="staff" id="userstaff" tabindex="0" value="" readonly="readonly"/>
</fieldset>
<fieldset class="form-fieldset ui-input __first">
<label for="email">
<span data-text="Комментарии:">Комментарии:</span>
</label>
<textarea name="uemail" id="email" tabindex="0" placeholder="Комментарии">
</textarea>
</fieldset>
<input name="formInfo" class="formInfo" type="hidden" value="Новая запись к врачу"/>
<!-- DIV - в котором выводится блок с recaptcha -->
<div class="g-recaptcha" data-sitekey="6Lem2bgUAAAAAOX74cFg_9nCwhQIGmaVe3kySNPY" data-theme="light"></div>
<div class="form-footer">
<input type="submit" class="formBtn" value="Отправить заявку" />
<label class="custom-control-label" for="customCheck">Нажимая кнопку, я принимаю условия <a href="/page/politika_konfidencialnosti.html">Пользовательского соглашения</a> и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года 152-ФЗ «О персональных данных».</label>
</div>
</form>
</div>
</div>
а вот поиск:
<div class="form-group">
<form id="search_form" action="/search/" role="search" method="post" class="footer-search-form">
<input class="form-search-footer form-control input-lg" name="words" maxlength="50" placeholder="{Поиск}..." required="" type="search" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="">
<button class="footer-search-button" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</div>
При попытке запустить поиск по сайту, поле поиска пропадает на 3 секунды и ничего не происходит, при этом форма работает корректно, Помогите пожалуйста разобраться. |
$("form").submit(function... - это объявление обработчика для всех форм, включая и форму поиска, а это modalform/mail.php обработчик чего?
А это var formID = $(this).attr('id'); var formNm = $('#' + formID); как понять? |
Цитата:
<?php
error_reporting(0);
require_once __DIR__ . '/recaptchalib.php';
// Введите свой секретный ключ
$secret = "";
// пустой ответ каптчи
$response = null;
// Проверка вашего секретного ключа
$reCaptcha = new ReCaptcha($secret);
if ($_POST["g-recaptcha-response"]) {
$response = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST['uname']) && (empty($_POST['uphone']))){
echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
} else {
if ($response != null && $response->success) {
if (isset($_POST['uname'])) {
$uname = strip_tags($_POST['uname']);
$unameFieldset = "<b>Ф.И.О.:</b>";
}
if (isset($_POST['uemail'])) {
$uemail = strip_tags($_POST['uemail']);
$uemailFieldset = "<b>Комментарий:</b>";
}
if (isset($_POST['uphone'])) {
$uphone = strip_tags($_POST['uphone']);
$uphoneFieldset = "<b>Телефон:</b>";
}
if (isset($_POST['formInfo'])) {
$formInfo = strip_tags($_POST['formInfo']);
$formInfoFieldset = "<b>Запись к специалисту:</b>";
}
if (isset($_POST['ustaff'])) {
$ustaff = strip_tags($_POST['ustaff']);
$ustaffFieldset = "<b>Специалист:</b>";
}
$to = ""; /*Укажите адрес, на который должно приходить письмо*/
$sendfrom = ""; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/
$headers = "From: " . strip_tags($sendfrom) . "\r\n";
$headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$headers .= "Content-Transfer-Encoding: 8bit \r\n";
$subject = "$formInfo: $ustaff";
$message = "$unameFieldset $uname<br>
$uphoneFieldset $uphone<br>
$ustaffFieldset $ustaff<br>
$uemailFieldset $uemail";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true') {
echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';
} else {
echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
}
} else {
echo '<p class="success">Не пройдена каптча! Попробуйте еще раз!</p>';
}
}
} else {
header ("Location: http:///"); // главная страница вашего лендинга
}
|
Цитата:
|
Значит мне нужно как то заставить его не трогать поиск? Или обрабатывать только форму?
|
я так думаю это из-за того что в форме связи и поиск работают через form
|
Цитата:
Но ведь и ответ будет принимать тот же обработчик, а на каждый запрос (отправление формы) будет свой ответ сервера. А значит функция success должна знать либо какая форма стала источником запроса, либо по признаку в ответе севера понять что за ответ пришел и что с ним делать. А у вас какой-то бардак с ID, и валится все по одному адресу. |
id у форм разные, type тоже, подскажите пожалуйста как сделать чтобы обработчик из темы работал только с формой у которой id="firstform".Я неопытный в этом вопросе
|
Цитата:
var formID = $(this).attr('id'); - this, это форма источник, то есть так которая отправляется и проще так this.id. А значит $('#' + formID) это тоже самое что и $(this). К чему это бесполезная писанина? А далее вы отсылаете запросы от всех своих форм на один адрес. И о каком типе разном речь, методе, так он у вас жестко указан type: "POST". У вас много ошибок как на клиенте, так и на сервере. К примеру, вот это пустяк if(empty($_POST['uname']) ..., но баг весьма неприятный, так как достаточно передать на сервер просто один пробел, и поле будет считаться не пустым. Если вам сложно разобраться, то сделайте два разных обработчика, то есть не $("form").submit(function ..., а $("ID формы связи").submit(function () ... и $("ID формы поиска").submit(function () ... где и действуйте согласно задачам. Вот только нужно отменять действие по умолчанию (отправление формы естественным образом) таким образом в обработчиках: ....submit(function (e) { e.prevetDefault(); .... PS. Пропустил return false;, это тоже самое что e.prevetDefault();, так что тут все норм. |
Если же форма поиска отправляется не AJAX, то у вас будет всего один обработчик для формы связи как $("ID формы связи").submit(function (e) ... и мешать форме поиска он не будет. В обработчике форма как JQ объект это $(this), а "магию" с ID из кода выбросить.
|
| Часовой пояс GMT +3, время: 13:26. |
|