I apologise in advance for not being able to provide any actual code, as the problem appears in a page which is currently private :-/ Please bear with me.
我提前道歉是因为无法提供任何实际代码,因为问题出现在目前私密的页面中: - /请耐心等待。
I have an HTML form. I attached a (proprietary) calendar widget to one of the text input fields. When the user tabs into the field the calendar appears. On the calendar there are a couple of buttons (to move to the previous/next month). When the user clicks on one of these buttons the calendar updates itself accordingly, but also - the form submits! There's NOTHING in the calendar code that touches anything other than the calendar itself and the text input field it is attached to, let alone submits a form! I would appreciate any clue regarding any of the following questions:
我有一个HTML表单。我将(专有)日历小部件附加到其中一个文本输入字段。当用户选中该字段时,将显示日历。在日历上有几个按钮(移动到上一个/下个月)。当用户点击其中一个按钮时,日历会相应地自行更新,但是 - 表单也会提交!日历代码中没有任何东西可以触及日历本身以及附加到的文本输入字段以外的任何内容,更不用说提交表单了!关于以下任何问题,我将不胜感激:
1) What could possibly have submitted the form in such a setting?
1)什么可能在这样的环境中提交表格?
2) What things generally submit a form, other than clicking on the submit button or hitting the enter key? (In particular, do ordinary buttons submit forms? Under which circumstances?)
2)除了点击提交按钮或点击回车键之外,通常提交表格的内容是什么? (特别是,普通按钮提交表格?在哪种情况下?)
3) As a workaround in case I don't manage to figure this out, is there a way to simply totally disable submitting the form (and then reenable it in an event handler attached to the submit key)?
3)作为一种解决方法,如果我没有设法解决这个问题,有没有办法简单地完全禁用提交表单(然后在附加到提交键的事件处理程序中重新启用它)?
Note(s): The calendar behaves normally other than that - responds normally to key events and to click events on the dates themselves (which are not buttons). I tried this on both Firefox and Chrome and got the same behaviour. I tried to follow the click event handler step-by-step with FireBug, and everything seemed perfectly normal - but the moment it finished the form was submitted (and the page reloaded). The widget uses jQuery 1.7.2. Any help in understanding and/or solving this will be most appreciated!
注意:日历的行为通常不是这样 - 通常响应键事件并单击日期本身的事件(不是按钮)。我在Firefox和Chrome上都试过这个并且行为相同。我尝试使用FireBug逐步跟踪点击事件处理程序,一切看起来都很正常 - 但是提交表单的那一刻(并重新加载了页面)。该小部件使用jQuery 1.7.2。理解和/或解决这个问题的任何帮助将非常感谢!
4 个解决方案
#1
23
Sorry to answer my own question, but none of the given answers was complete, even though I've learnt from them and from the comments! Thanks for everyone who participated!
很抱歉回答我自己的问题,但是没有一个给定的答案是完整的,即使我已经从他们和评论中学到了!感谢所有参与的人!
So:
1+2) Buttons defined by the <button> element cause submits (as if they had type="submit" set. At least in some browsers). If one wants a button not to cause a submit one should use <button type="button">, or the good old <input type="button" />.
1 + 2)由
3) (Unnecessary for me now, but it was part of the question.) There are many ways to prevent a form from submitting. Three of them are:
3)(现在不需要我,但这是问题的一部分。)有很多方法可以阻止表单提交。其中三个是:
-
to handle the
onsubmitevent, preventing the submit (byreturn false;or - preferably! - bye.preventDefault();) in case a flag is not set; set the flag when handling the event(s) that should actually submit the form处理onsubmit事件,防止提交(通过返回false;或 - 最好! - 通过e.preventDefault();)以防未设置标志;在处理应该实际提交表单的事件时设置标志
-
to handle the
onsubmitevent and prevent the submit as above if the element that triggered the event is not (one of) the element(s) we want to cause a submit如果触发事件的元素不是我们想要提交的元素(之一),则处理onsubmit事件并阻止上述提交
-
to set the form action to non-action, i.e.
action="#", and to have the handler for the event that should actually submit the form set the action to the proper address将表单操作设置为非操作,即action =“#”,并让实际提交表单的事件的处理程序将操作设置为正确的地址
#2
1
The calendar can submit your form in its JavaScript source code by calling form's submit() method using jQuery or plain JavaScript.
日历可以使用jQuery或纯JavaScript调用表单的submit()方法,在其JavaScript源代码中提交表单。
Here is an example how to disable the form submit and allow it only in case of pressing the button.
下面是一个如何禁用表单提交的示例,仅在按下按钮时允许它。
<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>
#3
1
The calendar code isn't calling submit() somewhere?
日历代码没有在某处调用submit()?
3) As a workaround in case I don't manage to figure this out, is there a way to simply totally disable submitting the form (and then reenable it in an event handler attached to the submit key)?
3)作为一种解决方法,如果我没有设法解决这个问题,有没有办法简单地完全禁用提交表单(然后在附加到提交键的事件处理程序中重新启用它)?
Unfortunately, I'm not totally sure if it's reliable that the click handler will be called before the form submit event.
不幸的是,我不完全确定在表单提交事件之前是否可以调用click处理程序。
( 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;
} );
} )();
or
$( "form" ).attr( { action : "#", method : "post" } );
$( "input[type='submit']" ).on( 'click', function ( event ) {
event.target.form.action = "...";
} );
#4
0
Hitting enter on text fields can sometimes trigger a form submit. See here. Especially if that is the only element in the form. One way to control the post back is to set the action to empty and fire off the event yourself with Javascript.
点击输入文本字段有时可以触发表单提交。看这里。特别是如果那是表格中唯一的元素。控制回发的一种方法是将操作设置为空并使用Javascript自行触发事件。
#1
23
Sorry to answer my own question, but none of the given answers was complete, even though I've learnt from them and from the comments! Thanks for everyone who participated!
很抱歉回答我自己的问题,但是没有一个给定的答案是完整的,即使我已经从他们和评论中学到了!感谢所有参与的人!
So:
1+2) Buttons defined by the <button> element cause submits (as if they had type="submit" set. At least in some browsers). If one wants a button not to cause a submit one should use <button type="button">, or the good old <input type="button" />.
1 + 2)由
3) (Unnecessary for me now, but it was part of the question.) There are many ways to prevent a form from submitting. Three of them are:
3)(现在不需要我,但这是问题的一部分。)有很多方法可以阻止表单提交。其中三个是:
-
to handle the
onsubmitevent, preventing the submit (byreturn false;or - preferably! - bye.preventDefault();) in case a flag is not set; set the flag when handling the event(s) that should actually submit the form处理onsubmit事件,防止提交(通过返回false;或 - 最好! - 通过e.preventDefault();)以防未设置标志;在处理应该实际提交表单的事件时设置标志
-
to handle the
onsubmitevent and prevent the submit as above if the element that triggered the event is not (one of) the element(s) we want to cause a submit如果触发事件的元素不是我们想要提交的元素(之一),则处理onsubmit事件并阻止上述提交
-
to set the form action to non-action, i.e.
action="#", and to have the handler for the event that should actually submit the form set the action to the proper address将表单操作设置为非操作,即action =“#”,并让实际提交表单的事件的处理程序将操作设置为正确的地址
#2
1
The calendar can submit your form in its JavaScript source code by calling form's submit() method using jQuery or plain JavaScript.
日历可以使用jQuery或纯JavaScript调用表单的submit()方法,在其JavaScript源代码中提交表单。
Here is an example how to disable the form submit and allow it only in case of pressing the button.
下面是一个如何禁用表单提交的示例,仅在按下按钮时允许它。
<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>
#3
1
The calendar code isn't calling submit() somewhere?
日历代码没有在某处调用submit()?
3) As a workaround in case I don't manage to figure this out, is there a way to simply totally disable submitting the form (and then reenable it in an event handler attached to the submit key)?
3)作为一种解决方法,如果我没有设法解决这个问题,有没有办法简单地完全禁用提交表单(然后在附加到提交键的事件处理程序中重新启用它)?
Unfortunately, I'm not totally sure if it's reliable that the click handler will be called before the form submit event.
不幸的是,我不完全确定在表单提交事件之前是否可以调用click处理程序。
( 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;
} );
} )();
or
$( "form" ).attr( { action : "#", method : "post" } );
$( "input[type='submit']" ).on( 'click', function ( event ) {
event.target.form.action = "...";
} );
#4
0
Hitting enter on text fields can sometimes trigger a form submit. See here. Especially if that is the only element in the form. One way to control the post back is to set the action to empty and fire off the event yourself with Javascript.
点击输入文本字段有时可以触发表单提交。看这里。特别是如果那是表格中唯一的元素。控制回发的一种方法是将操作设置为空并使用Javascript自行触发事件。