如何禁用提交操作答案

【问题标题】：How to disable submit action如何禁用提交操作
【发布时间】：2012-05-09 20:51:15
【问题描述】：

您好，我有这个表单，我不想在单击提交按钮时执行任何操作。我要做的就是执行将数据加载到 div 中的功能。有什么想法吗？？

<form  method="POST"   action="" id="search-form">
          <input type="text" name="keywords"  />
          <input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

【问题讨论】：

你尝试过使用 jquery 的 ajax 吗？

标签： javascript jquery ajax forms

【解决方案1】：

onclick="loadXMLDoc('file.xml'); return false;"

甚至更好：

<script>
    window.onload = function() { 
        document.getElementById("search-form").onsubmit = function() { 
            loadXMLDoc('file.xml');
            return false;
        };
    };
</script>

要实现 loadXMLDoc，您可以使用 jQuery 中的 ajax 模块。例如：

function loadXMLDoc() { 
    $("div").load("file.xml");
}

使用 jQuery 的最终代码：

<script>
    $(function() { 
        $("#search-form").submit(function() { 
            $("div").load("file.xml");
            return false;
        });
    });
</script>

【讨论】：

在这种情况下是e.preventDefault() 更好还是return false 更好？
return false 更好，因为它可以防止事件的默认行为并且可以防止页面冒泡。请注意，这仅在 jQuery 事件处理程序中是正确的。
@Alon Gubkin — 你所说的“……这仅在 jQuery 事件处理程序中是正确的”是什么意思？无论您是否使用 jQuery，在提交侦听器中使用 return false 都会取消提交。
@RobG 但它不会取消页面在非 jQuery 事件处理程序中冒泡。
@AlonGubkin——我想你是在谈论事件冒泡。鉴于大多数浏览器中的提交事件无论如何都不会冒泡，因此表单不能嵌套，因此提交一个冒泡到另一个冒泡并且在任何其他元素上放置一个提交侦听器没有多大意义，这正是“问题" 阻止它冒泡是否比添加 100kb 的缩小库来完成可以用两个代码完成的事情更重要？

【解决方案2】：

我认为您需要 ajax 函数来在 div 中加载数据而无需重新加载页面

将输入类型submit更改为button

<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />

Ajax 调用：

<script type="text/javascript">
    function AjaxSend(){
         $.get('file.xml', function(data) {
              $('div').html(data);
          });
     }
</script>

【讨论】：

你的意思是 onclick="javascript:AjaxSend()" ...我想知道它现在是否适用于任何地方。它应该，顺便说一句。

【解决方案3】：

使用防止默认值来避免表单操作。请参考下面的代码可能对您有所帮助

function createRecord(){	
	event.preventDefault();
	
}

<form>

<input type="text"/>
<input type="submit" onclick="createRecord()"/>

</form>

【讨论】：

【解决方案4】：

只需从form 中删除action 参数并添加onsubmit="return false"。每次单击表单中的任何按钮时，它都会返回 false。试试这样：

<form  method="POST" onsubmit="return false" id="search-form">
          <input type="text" name="keywords"  />
          <input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

【讨论】：