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 из кода выбросить.
|
$(document).ready(function () {
$("#firstform").submit(function (e) {
e.preventDefault();
// Получение ID формы
var formID = $(this).attr('id');
// Добавление решётки к имени 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());
});
});
|
Так? Если я верно сделал, то не работает
|
Цитата:
|
Вот код для поиска и для формы
//ajax форма
$(document).ready(function () {
$("#firstform").on('submit', function(){
// Получение ID формы
var formID = $(this).attr('id');
// Добавление решётки к имени 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());
});
});
// Ajax поиск
$("#search").on('input', function() {
var words = $(this).val();
if (words.length > 2) {
$.ajax({
type: "POST",
url: ROOT_PATH + "/search/",
data: {
words: escape(words + ' ' + auto_layout_keyboard(words)),
set: 2,
ajax: true
},
success: function(data)
{
// Результат поиска
if (data != 'false') {
if (data != $("#search").attr('data-content')) {
$("#search").attr('data-content', data);
$("#search").popover('show');
}
} else
$("#search").popover('hide');
}
});
}
else {
$("#search").attr('data-content', '');
$("#search").popover('hide');
}
});
|
Цитата:
|
В запросе формы поиска тоже нужно запрещать действие по умолчанию, то есть либо return false;, либо как писал выше.
|
laimas,
Вот так сделал, поиск работает форма нет
//ajax форма
$(document).ready(function () {
$("#firstform").submit(function(){
// Получение ID формы
var formID = $(this).attr('id');
// Добавление решётки к имени 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());
});
});
// Ajax поиск
$("#search").on('input', function() {
var words = $(this).val();
if (words.length > 2) {
$.ajax({
type: "POST",
url: ROOT_PATH + "/search/",
data: {
words: escape(words + ' ' + auto_layout_keyboard(words)),
set: 2,
ajax: true
},
success: function(data)
{
// Результат поиска
if (data != 'false') {
if (data != $("#search").attr('data-content')) {
$("#search").attr('data-content', data);
$("#search").popover('show');
}
} else
$("#search").popover('hide');
}
});
}
else {
$("#search").attr('data-content', '');
$("#search").popover('hide');
}
return false;
});
|
Цитата:
Цитата:
$("#firstform").submit(function(){
// Получение форму
var form = $(this);
$.ajax({
type: "POST",
url: 'modalform/mail.php',
data: form.serialize(),
success: function (data) {
// Вывод сообщения об успешной отправке
$('.msgs').html(data);
$('.formTitle').hide();
form.hide();
setTimeout(function(){
form.show();
$('.formTitle').show();
$('.msgs').html('');
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
},
error: function (jqXHR, text, error) {
// Вывод сообщения об ошибке отправки
$('.msgs').html(error);
$('.formTitle').hide(;
form.hide();
setTimeout(function(){
form.show();
$('.formTitle').show();
$('.msgs').html('');
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
}
});
return false;
});
Что именно не работает? В форме поиска:
$("#search").on('input', function() {
var f = $(this), words = this.value.trim();
if (words.length > 2) {
$.ajax({
type: "POST",
url: ROOT_PATH + "/search/",
data: {
words: escape(words + ' ' + auto_layout_keyboard(words)),
set: 2,
ajax: true
},
success: function(data)
{
// Результат поиска
if (data != 'false') {
if (data != f.attr('data-content')) {
f.attr('data-content', data).popover('show');
}
} else f.popover('hide');
}
});
}
else f.attr('data-content', '').popover('hide');
return false;
});
|
laimas,
Вставил, то что вы прислали, поиск работает, форма нет |
Цитата:
|
Там бы код обработки формы отправки сообщения, я его перенес в общий, а файл не отключил пока
|
Значит где-то либо ошибка в размещении кода обработчика, либо вообще он не подключен, так как нет у этой формы обработчика и форма отправляется естественным способом. В какой файл помещен код?
|
laimas,
/phpshop/templates/puls/js/phpshop.js нужный код начинается со строки 947 |
Удалите строки 949 и 990, ибо вы впихнули в $(document).ready(function () второй $(document).ready(function () в котором обработчик формы.
В этом же файле строки 150-153 не могут работать вне $(document).ready(function () { .... |
И перепишите обработчик так:
$("#firstform").submit(function(){
// Получение форму
var form = $(this), msg = $('.msgs') bx = form.add($('.formTitle'));
$.ajax({
type: "POST",
url: 'modalform/mail.php',
data: form.serialize(),
success: function (data) {
// Вывод сообщения об успешной отправке
msg.html(data);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
},
error: function (jqXHR, text, error) {
// Вывод сообщения об ошибке отправки
msg.html(error);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
}
});
return false;
});
негоже многократно получать объекты. |
laimas,
Удалил строки, форма не заработала, затем заменил на ваш код, и пропало меню перестла работать форма |
laimas,
Также перестали добавляться имена врачей |
имена добавлялись так
<script type="text/javascript">
$(".linkButton").click(function() {
$( "input[name*='formInfo']" ).val($(this).attr( "title" ));
});
</script>
|
Пояснение: обработчик события можно установить элементу тогда, когда он будет доступен, а это может быть только после того как будет загружена страница и сформирован DOM. Когда страница загружена, то возникает событие загрузки документа, в jQuery это можно прописать двумя способами:
//так
$(document).ready(function() {
//здесь объявляется установка обработчиков и прочие действия с элементами страницы
});
//или так
$(function() {
//здесь объявляется установка обработчиков и прочие действия с элементами страницы
});
Вы же взяли код обработчика формы с обработчиком события загрузки документа и воткнули его в обработчик загрузки документа. А оно ведь не сработает (тот что вы вставили), оно уже сработало, а значит никакого обработчика у формы не будет. Вставленный вами этот обработчик начинается и кончается в указанных строках, их и надо удалить из кода. Ваш файл подключается в теле страницы и если он следует после формы и прочих элементов которые описаны в событии загрузки документа, то это событие можно и удалить вообще. Но коли вы не разбираетесь, то не трогайте, удалите только в тех строках что указаны. Второе: если ваша форма не присутствует на странице, появляется динамически на ней, то обработчик ее события нужно делегировать, или же определять после того как форма будет добавлена на страницу. |
Цитата:
|
laimas,
Вставил обработчик в отдельный файл и подключил его после формы верный код?
$(document).ready(function() {
$("#firstform").submit(function(){
// Получение форму
var form = $(this), msg = $('.msgs') bx = form.add($('.formTitle'));
$.ajax({
type: "POST",
url: 'modalform/mail.php',
data: form.serialize(),
success: function (data) {
// Вывод сообщения об успешной отправке
msg.html(data);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
},
error: function (jqXHR, text, error) {
// Вывод сообщения об ошибке отправки
msg.html(error);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('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());
});
форма также не работает и редактор ругается на 4 строку |
Еще раз: в файле phpshop.js обработчик загрузки документа начинается в строке 586 и заканчивается в строке 1424. Вы в любом месте между этих строк должны поместить только это(!):
$("#firstform").submit(function(){
// Получение форму
var form = $(this), msg = $('.msgs') bx = form.add($('.formTitle'));
$.ajax({
type: "POST",
url: 'modalform/mail.php',
data: form.serialize(),
success: function (data) {
// Вывод сообщения об успешной отправке
msg.html(data);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
},
error: function (jqXHR, text, error) {
// Вывод сообщения об ошибке отправки
msg.html(error);
bx.hide();
setTimeout(function(){
bx.show();
msg.empty();
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
}
});
return false;
});
без копирования $(document).ready(function() {. Это понятно? |
laimas,
я убрал этот код из phpshop.js и создал отдельный файл с кодом выше, подключил его после формы файл /modalform/js/form.js |
Откройте отладчик браузера, в нем во вкладке сеть будете наблюдать, что по адресу http://puls.bulean.ru/modalform/libs/remodal/form.js файла не найдено, статус 404. Другого подключения файла с таким именем не видно.
|
И зачем дважды подключается
<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/Zy-zVXWdnDW6AUZkKlojAKGe/recaptcha__ru.js"></script>? |
laimas,
я пропустил, извините, но в 4 строке все еще ошибка Uncaught SyntaxError: Unexpected identifier |
Уберите подключение form.js, замените свой phpshop.js прикрепленным файлом, в нем вставлено так, как полагается.
|
насколько я помню при подключении капчи она не срабатывала в модальном окне если была подключена 1 раз
|
но с этим проблем не было
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:45. |