Я хотел бы запустить функцию JavaScript при отправке формы. Проблема заключается в том, что при отправке формы страница перезагружается, а значения формы добавляются в URL как параметры GET. Я бы хотел, чтобы он оставался на текущей странице и выполнял только функцию JavaScript.
Мне было интересно, что лучше всего (или что вы делаете), чтобы избежать отправки и перезагрузки страницы.
Используйте событие onsubmit для выполнения кода JavaScript при отправке формы. Затем вы можете вернуть false или вызвать метод прошедшего события preventDefault, чтобы отключить отправку формы.
Например:
<script>
function doSomething() {
alert('Form submitted!');
return false;
}
</script>
<form onsubmit="return doSomething();" class="my-form">
<input type="submit" value="Submit">
</form>
Это работает, но лучше не засорять ваш HTML с помощью JavaScript, так же, как вы не должны писать много встроенных правил CSS. Многие механизмы Javascript облегчают это разделение проблем. В jQuery вы привязываете событие с использованием кода JavaScript следующим образом:
<script>
$('.my-form').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<form class="my-form">
<input type="submit" value="Submit">
</form>
Прикрепите обработчик события к событию отправки формы. Убедитесь, что оно отменяет действие по умолчанию.
Режим Quirks руководство для обработчиков событий, но вам, вероятно, будет лучше использовать библиотеку для упрощения кода и сгладить различия между браузерами. Все основные (например, YUI и jQuery) включают функции обработки событий, и есть большая коллекция крошечных библиотек событий.
Вот как вы это сделаете в YUI 3:
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script>
YUI().use('event', function (Y) {
Y.one('form').on('submit', function (e) {
// Whatever else you want to do goes here
e.preventDefault();
});
});
</script>
Удостоверьтесь, что сервер получит слабину, если JavaScript по какой-либо причине не работает.
Я знаю это немного поздно для этого. Но я всегда думал, что лучший способ создания прослушивателей событий - прямо из JavaScript. Вроде как не применять встроенные стили CSS.
function validate(){
//do stuff
}
function init(){
document.getElementById('form').onsubmit = validate;
}
windows.onload = init;
Таким образом, у вас не будет кучи прослушивателей событий в вашем HTML-коде.