Question

我提前道歉是因为无法提供任何实际代码，因为问题出现在目前私密的页面中： - /请耐心等待。

我有一个HTML表单。我将（专有）日历小部件附加到其中一个文本输入字段。当用户选中该字段时，将显示日历。在日历上有几个按钮（移动到上一个/下个月）。当用户点击其中一个按钮时，日历会相应地更新自己，但是 - 表单也会提交！日历代码中没有任何东西可以触及除日历本身以及附加到的文本输入字段之外的任何内容，更不用说提交表单了！我将不胜感激任何关于以下任何问题的线索：

1）在这样的环境中可能提交表格的内容是什么？

2）除了点击提交按钮或点击回车键之外，通常提交表格的内容是什么？（特别是，普通按钮提交表格？在哪种情况下？）

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

注意：日历的行为通常不是这样 - 通常响应键事件并单击日期本身的事件（不是按钮）。我在Firefox和Chrome上都试过这个并且行为相同。我尝试使用FireBug逐步跟踪click事件处理程序，一切看起来都很正常 - 但是提交表单的那一刻（并重新加载页面）。该小部件使用jQuery 1.7.2。理解和/或解决这个问题的任何帮助都将非常感激！

Answer 1

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

所以：

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

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

处理onsubmit事件，防止在未设置标志的情况下（return false;或 - {！}}提交（e.preventDefault();）;在处理应该实际提交表单的事件时设置标志
处理onsubmit事件并阻止上述提交，如果触发事件的元素不是（我们想要引起提交的元素之一）
< / LI>
将表单操作设置为非操作，即action="#"，并让实际提交表单的事件的处理程序将操作设置为正确的地址

Answer 2

日历代码是不是在某个地方调用submit()？

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

不幸的是，我并不完全确定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 = "...";

} );

Answer 3

日历可以通过使用jQuery或纯JavaScript调用form的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>

Demo

Answer 4

按文字字段输入有时会触发表单提交。 See here.特别是如果这是表单中唯一的元素。控制回发的一种方法是将操作设置为空并使用Javascript自行触发事件。

Answer 5

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

什么触发HTML表单提交？

5 个答案: