Что вызывает отправку HTML-формы?

Я заранее извиняюсь за то, что не смог предоставить какой-либо фактический код, поскольку проблема возникает на странице, которая в настоящее время является частной: -/Пожалуйста, несите меня.

У меня есть HTML-форма. Я подключил (собственный) виджет календаря к одному из полей ввода текста. Когда пользователь вставляет в поле календарь, появляется календарь. В календаре есть несколько кнопок (для перехода к предыдущему/следующему месяцу). Когда пользователь нажимает на одну из этих кнопок, календарь обновляется соответственно, но также - форма отправляется! В коде календаря нет ничего, кроме самого календаря и поля ввода текста, к которому он прикреплен, не говоря уже о форме! Буду признателен за любой из следующих вопросов:

1) Что могло бы представить форму в такой настройке?

2) Какие вещи вообще отправляют форму, кроме нажатия на кнопку отправки или нажатия клавиши ввода? (В частности, обычные кнопки представляют формы? При каких обстоятельствах?)

3) Как обходной путь в случае, если мне не удается это понять, существует ли способ просто полностью отключить отправку формы (а затем снова включить ее в обработчике событий, прикрепленном к клавише отправки)?

Примечание (и): Календарь ведет себя нормально, кроме этого - обычно отвечает на ключевые события и кликает события самих дат (которые не являются кнопками). Я попробовал это как в Firefox, так и в Chrome и получил то же поведение. Я пытался следить за обработчиком событий щелчка по шагам с FireBug, и все казалось совершенно нормальным - но в тот момент, когда он закончил форму, был отправлен (и страница перезагружена). Виджет использует jQuery 1.7.2. Любая помощь в понимании и/или решении этой проблемы будет оценена наиболее высоко!

Ответы

Ответ 1

Извините, что ответил на мой собственный вопрос, но ни один из ответов не был полным, хотя я узнал от них и от комментариев! Спасибо всем, кто участвовал!

Итак:

1 + 2) Кнопки, определенные элементом <button>, вызывают отправку (как если бы они были установлены type="submit". По крайней мере, в некоторых браузерах). Если вы хотите кнопку не, чтобы вызвать отправку, следует использовать <button type="button"> или старый добрый <input type="button" />.

3) (Ненужное для меня сейчас, но это было частью вопроса.) Существует множество способов предотвратить отправку формы. Три из них:

  • обрабатывать событие onsubmit, предотвращая отправку (через return false; или - предпочтительно! - на e.preventDefault();) в случае, если флаг не установлен; установите флаг при обработке событий (событий), которые должны фактически отправить форму

  • для обработки события onsubmit и предотвращения отправки как указано выше, если элемент, инициировавший событие, не является (одним из) элементов (я), которые мы хотим вызвать submit

  • чтобы установить действие формы на недействительное, т.е. action="#", и иметь обработчик для события, которое должно фактически отправить форму, установите действие на соответствующий адрес

Ответ 2

Календарный код не вызывает submit() где-нибудь?

3) Как обходной путь в случае, если мне не удается это понять, существует ли способ просто полностью отключить отправку формы (а затем снова включить ее в обработчике событий, прикрепленном к клавише отправки)?

К сожалению, я не совсем уверен, надежно ли, что обработчик click будет вызван перед событием формы submit.

( function () {

  var prevent_submit = true;

  $( "form" ).on( 'submit', function ( event ) {

    if ( prevent_submit ) {

      event.preventDefault();

    }

  } );


  $( "input[type='submit']" ).on( 'click', function ( event ) {

    prevent_submit = false;

  } );

} )();

или

$( "form" ).attr( { action : "#", method : "post" } );

$( "input[type='submit']" ).on( 'click', function ( event ) {

  event.target.form.action = "...";

} );

Ответ 3

Календарь может отправить вашу форму в исходный код JavaScript, вызвав метод form() метода, используя jQuery или обычный JavaScript.

Вот пример того, как отключить отправку формы и разрешить ее только в случае нажатия кнопки.

<form id="form">
    <input type="text" />
    <input type="button" name="submit-button" value="Submit"/>
</form>​
<script type="text/javascript">
    var form = document.getElementById('form'),
        button = form['submit-button'];
    form.onsubmit = function(e) {
        return !!form.getAttribute('data-allow-submit');
    };
    button.onclick = function() {
        form.setAttribute('data-allow-submit', 1);
        form.submit();
    };
</script>

Демо

Ответ 4

Включение ввода текстовых полей может иногда инициировать отправку формы. См. здесь. Особенно если это единственный элемент в форме. Один из способов контроля над сообщением - установить действие на пустое и запустить событие с помощью Javascript.

Ответ 5

Проверьте размещение тегов закрывающей формы. Однажды у меня возникла эта проблема, и я наконец понял, что в самой форме есть некоторый код "разрешений", который не позволяет пользователю достичь закрывающего тега, потому что у него не было надлежащего уровня разрешений для его отправки. По сути, это оставило открытый тег формы, который затем реагировал на другие кнопки в другом месте на той же странице.