Запретить браузеру переход на верхнюю страницу при отправке формы

Question

Я пытаюсь предотвратить переход страницы наверх, когда пользователь отправляет форму. Есть много людей, предлагающих return false. Однако это также предотвращает отправку формы.

Мне было интересно, может ли кто-нибудь помочь мне с этим.

**JQuery**

$('#submit').click(function(){ //doesn't work
    return false;
})

$('form').submit(function(){  //doesn't work either
    return false;       
})



**Html**
<form...>
<input>...
<input>...
<input>...

<input type='submit' id='submit' value='submit'>

</form>

Answer 1

Попробуйте использовать protectDefault () в jquery ..

$('#submit').click(function(e){ 
    e.preventDefault();
});

Answer 2

Когда вы отправляете форму, вы эффективно загружаете новую страницу. Возврат false в обработчике submit просто говорит браузеру не создавать событие и не выполнять событие по умолчанию, которое в данном случае отправляет форму, поэтому при этом ничего не происходит.

Есть несколько решений вашей проблемы. Если вы перенаправляете своего пользователя (после отправки формы) обратно на страницу формы, но с ошибками, вы можете включить «идентификатор фрагмента» в URL. Сделайте так, чтобы идентификатор фрагмента указывал на идентификатор вашей формы, и браузер автоматически перейдет к этой части документа. Пример:

<form id="my-form">
    ...
</form>

И ваш URL будет:

host/path?query=querystring#my-form

Если вы хотите избежать перезагрузки страницы, попробуйте выполнить проверку в JS. Плагин проверки jQuery очень прост в использовании и просто фантастичен. См. здесь , чтобы узнать, как его использовать. Это здорово, потому что он выполняет большую часть тяжелой работы за вас и имеет набор общих стандартных методов проверки.

В качестве альтернативы вы можете отправить свою форму через ajax и вернуть любые ошибки проверки, которые обнаружил сервер. Если у вас нет ошибок, вы можете перенаправить на следующую страницу. Если есть ошибки, вставьте их в форму или отобразите предупреждение. Это решение избавит вас от необходимости повторять любую сложную логику проверки на клиенте (если вы хотите использовать плагин проверки JQuery).

Answer 3

В случае использования типа формы submit (с обратным вызовом #ajax) в диалогах jQuery на формах drupal:

попробуйте использовать тип формы button (также с обратным вызовом #ajax).