16

对于无法提供任何实际代码，我提前道歉，因为问题出现在当前私有的页面中：-/ 请多多包涵。

我有一个 HTML 表单。我将（专有）日历小部件附加到其中一个文本输入字段。当用户进入该字段时，会出现日历。在日历上有几个按钮（移动到上/下个月）。当用户点击这些按钮之一时，日历会相应地更新，而且 - 表单提交！除了日历本身和它所附加的文本输入字段之外，日历代码中没有任何内容，更不用说提交表单了！我将不胜感激有关以下任何问题的任何线索：

1) 在这种情况下，什么可能提交表单？

2）除了点击提交按钮或按回车键之外，一般会提交哪些表单？（特别是普通按钮会提交表单吗？在什么情况下？）

3）作为一种解决方法，以防我无法解决这个问题，有没有办法完全禁用提交表单（然后在附加到提交键的事件处理程序中重新启用它）？

注意（S）：除此之外，日历的行为正常 - 正常响应关键事件和日期本身的单击事件（不是按钮）。我在 Firefox 和 Chrome 上都试过这个，得到了相同的行为。我尝试使用 FireBug 一步一步地跟踪 click 事件处理程序，一切似乎都很正常 - 但在它完成的那一刻，表单被提交（并且页面重新加载）。该小部件使用 jQuery 1.7.2。任何理解和/或解决此问题的帮助将不胜感激！

4

5 回答 5

30

很抱歉回答我自己的问题，但没有一个给出的答案是完整的，即使我已经从他们和评论中学到了！感谢所有参与的人！

所以：

1+2) 由元素定义的按钮<button>导致提交（就好像它们已经type="submit"设置了一样。至少在某些浏览器中）。如果一个想要一个按钮不导致提交一个应该使用<button type="button">，或者好旧的<input type="button" />。

3）（现在对我来说没有必要，但这是问题的一部分。）有很多方法可以防止表单提交。其中三个是：

  • 处理事件，在未设置标志的情况下onsubmit阻止提交（通过return false;或 - 最好！ - 通过）；e.preventDefault();在处理应该实际提交表单的事件时设置标志

  • 如果触发事件的元素不是我们想要引起提交的元素（之一），则处理onsubmit事件并阻止上述提交

  • 将表单动作设置为非动作，即action="#"，并让应该实际提交表单的事件的处理程序将动作设置为正确的地址

于 2012-08-10T02:08:52.040 回答
1

日历代码没有在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 = "...";

} );
于 2012-08-09T23:52:47.783 回答
1

日历可以通过使用 jQuery 或纯 JavaScript 调用表单的 submit() 方法，在其 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>

演示

于 2012-08-10T00:05:29.480 回答
0

在文本字段上按回车键有时会触发表单提交。看这里。特别是如果这是表单中唯一的元素。控制回发的一种方法是将操作设置为空并使用 Javascript 自己触发事件。

于 2012-08-09T23:53:21.843 回答
0

检查结束表单标签的位置。我曾经遇到过这个问题，我最终发现表单本身中有一些“权限”代码阻止用户到达结束标记，因为他没有适当的权限级别来提交它。实际上，这留下了一个打开的表单标签，然后响应同一页面上其他地方的其他按钮。

于 2019-05-19T22:45:17.520 回答