Форма отправки Выполнить JavaScript Best Practice?

Question

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

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

Answer 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>

Answer 2

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

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

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

Answer 3

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

Quirks Mode имеет руководство по обработчикам событий , но вам, вероятно, было бы лучше использовать библиотеку, чтобы упростить код и сгладить различия между браузерами. Все основные (такие как 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 по какой-либо причине не работает.