Question

您好我有这个表单，我不想在单击提交按钮时执行操作。我想要做的就是执行一个将数据加载到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>

Answer 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>

Answer 2

我认为您需要ajax函数来加载div中没有页面重新加载

的数据

将输入类型submit更改为button

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

Ajax CAll：

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

Answer 3

使用prevent defaults以避免表单操作。请参考下面的代码，它可能会对您有所帮助

diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index c06acb9..0000000
--- a/yarn.lock
+++ /dev/null
@@ -1,10383 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"7zip-bin@~4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-4.1.0.tgz#33eff662a5c39c0c2061170cc003c5120743fff0"
-  integrity sha512-AsnBZN3a8/JcNt+KPkGGODaA4c7l3W5+WpeKgGSbstSLxqWtTXqd1ieJGBQ8IFCtRg8DmmKUcSkIkUc0A4p3YA==
-
-"@angular-devkit/architect@0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.11.4.tgz#f0cc3b4f1dd0128f6b41d3bb760bcf4c324cd063"
-  integrity sha512-2zi6S9tPlk52vyqN67IvFoeNgd0uxtrPlwl3TdvJ3wrH7sYGJnkQ+EzAE7cKUGWAV989BbNtx2YxhRDHnN21Fg==

git diff -- src/app/models/DiffFileInformation.ts

如何禁用提交操作

3 个答案: