Итак, я делаю чек, когда пользователь вводит электронное письмо, чтобы узнать, существует ли почта или нет.
$('form.recover-form#check-form').on('submit', function(e){ var form = $(this), input = $('.check-recover-email'), span = $('.recover-error'), email = input.val(); span.text(''); e.preventDefault(); $.ajax({ url: 'ajax/check-email', async: 'false', cache: 'false', type: 'POST', data: {email: email}, success: function(response) { if ( response == 'no' ) { span.text('email does not exist'); } else if ( response == 'ok' ) { form.submit(); } } }); }); Код php
if ( Input::isPost('email') ) { $email = Input::post('email'); $check = $dbh->prepare(" SELECT * FROM users WHERE email = :email "); $check->execute(array( 'email' => $email )); echo ( $check->rowCount() == 1 ) ? 'ok' : 'no' ; }
Таким образом, как только я e.PreventDefault() форму, которую он представляет, и e.PreventDefault() внутри вызова AJAX не работает. Если я помещаю e.PreventDefault() перед вызовом AJAX, форма не отправляется и появляется ошибка, если письмо не существует (этого я хочу достичь).
Я не могу понять, где проблема, надеюсь, что вы сможете помочь.
Спасибо.
EIDT: Это обновленный код
Проблема в том, что вы не вызываете preventDefault во время обработки события. Вместо этого во время обработки события вы запускаете ajax-вызов (который является асинхронным), а затем пусть событие продолжается. Вызов ajax завершается позже , что слишком поздно, чтобы предотвратить по умолчанию событие – это уже произошло.
Переместите e.preventDefault() непосредственно в обработчик события, вне обработчика success ajax.
$('.recover-form').on('submit', function(e){ var form = $(this), input = $('.check-recover-email'), span = $('.recover-error'), email = input.val(); span.text(''); e.preventDefault(); // <=================== Here $.ajax({ url: 'ajax/check-email', async: 'false', cache: 'false', type: 'POST', data: form.serialize(), success: function(response){ if ( response == 0 ) { // ============================ Not here, this would be too late span.text('email does not exist'); } } }); });
В комментарии вы сказали:
Да, он работает для проверки, но я хочу отправить форму, если ajax возвращает положительный ответ. Я только делаю чек с AJAX, если он не удается остановить отправку, если это удастся продолжить отправку.
Вы не можете задержать оригинальную отправку формы, ожидая результата асинхронного вызова ajax. Вместо этого вы отменяете исходное представление формы, делаете ajax, а затем, если результат в порядке, повторите отправку формы с использованием метода submit в элемент form необработанного DOM. Этот метод не перезапускает обработчики событий submit .
Пример: Живая копия
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <meta charset=utf-8 /> <title>Delaying form submit during ajax</title> </head> <body> <form action="http://www.google.com/search" method="GET"> <input type="text" name="q" value="kittens"> <input type="submit" value="Submit"> </form> <script> (function() { $("form").submit(function(e) { var rawFormElement = this; // Remember the DOM element for the form // Stop form submission display("Got form submit event, simulating ajax"); e.preventDefault(); // Simulate ajax check of data setTimeout(function() { // (This is the 'success' callback for the ajax) display("Ajax call complete, pretending result is good and submitting"); // All okay, go ahead and submit the form rawFormElement.submit(); // Doesn't trigger 'submit' handler }, 1500); }); function display(msg) { $("<p>").html(String(msg)).appendTo(document.body); } })(); </script> </body> </html>
Вы не можете предотвратить действие по умолчанию из обработчика успеха ajax-запроса из-за асинхронного характера этого.
Вместо этого по умолчанию запретить отправку формы, а затем в обработчике успеха, если она действительна, затем повторно вызовите submit.
$('.recover-form').on('submit', function (e) { var form = $(this), input = $('.check-recover-email'), span = $('.recover-error'), email = input.val(); span.text(''); //prevent the submit e.preventDefault(); $.ajax({ url: 'ajax/check-email', async: 'false', cache: 'false', type: 'POST', data: form.serialize(), success: function (response) { if (response == 0) { span.text('email does not exist'); } else { //submit if valie form[0].submit() } } }); });
Во-первых, вы неверны. cache и async требуют булевых значений, а не строк.
async: false, cache: false,
Во-вторых, вместо отправки формы после запроса ajax вы вместо этого запускаете событие. Попробуйте это вместо этого.
form.get(0).submit();
Он возвращает узел формы, а не объект jquery, позволяя вам отправлять его напрямую, а не запускать событие (иначе у вас будет бесконечный цикл).
В этом случае вам не нужен async: false или cache: false .
Вам необходимо сделать следующее:
$('.recover-form').on('submit', function(e){ e.preventDefault(); var form = $(this), input = $('.check-recover-email'), span = $('.recover-error'), email = input.val(); span.text(''); $.ajax({ url: 'ajax/check-email', async: 'false', cache: 'false', type: 'POST', data: form.serialize(), success: function(response){ if ( response == 0 ) { span.text('email does not exist'); } } }); });
Обратите внимание, как я переместил e.preventDefault () в начало. Это связано с тем, что вы вызывали его, когда запрос ajax отвечает, что может произойти через 100 секунд в миллисекундах или даже через секунды после отправки формы
Это происходит потому, что функция успеха, переданная для jQuery.ajax() , выполняется assyncly, тогда она будет выполнена после завершения функции обработчика события.
Вы должны поместить e.preventDefault() из ajax-функции . и все будет работать.
Лучше вы можете попробовать что-то вроде этого,
<form name="myForm" onsubmit="return submitObj.validateAndSubmit();"> <!-- your form --> <!-- your AJAX --> var submitObj = { validateAndSubmit : function() { var form = $('.recover-form'), input = $('.check-recover-email'), span = $('.recover-error'), email = input.val(); span.text(''); $.ajax({ url: 'ajax/check-email', async: 'false', cache: 'false', type: 'POST', data: form.serialize(), success: function(response){ if ( response == 0 ) { return false; } else{ return true; } } }); } };