Форма Представить Execute JavaScript Best Practice?

Я хотел бы запустить функцию JavaScript при отправке формы. Проблема заключается в том, что при отправке формы страница перезагружается, а значения формы добавляются в URL как параметры GET. Я бы хотел, чтобы он оставался на текущей странице и выполнял только функцию JavaScript.

Мне было интересно, что лучше всего (или что вы делаете), чтобы избежать отправки и перезагрузки страницы.

Ответы

Ответ 1

Используйте событие 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>

Ответ 2

Прикрепите обработчик события к событию отправки формы. Убедитесь, что оно отменяет действие по умолчанию.

Режим 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 по какой-либо причине не работает.

Ответ 3

Я знаю это немного поздно для этого. Но я всегда думал, что лучший способ создания прослушивателей событий - прямо из JavaScript. Вроде как не применять встроенные стили CSS.

function validate(){
    //do stuff
}
function init(){
    document.getElementById('form').onsubmit = validate;
}
windows.onload = init;

Таким образом, у вас не будет кучи прослушивателей событий в вашем HTML-коде.