HTML: 阻止表单提交并调用JavaScript函数 JavaScript: 阻止表单提交并调用JavaScript函数

Question

HTML: 阻止表单提交并调用JavaScript函数 JavaScript: 阻止表单提交并调用JavaScript函数

31

当表单提交按钮被按下时，我想要进行 AJAX 调用。实际上，我不能移除 <form>，因为我也想要进行客户端验证。我尝试了这段代码。

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JavaScript

function makeSearch(){
alert("Code to make AJAX Call");
}

使用这段代码后，alert() 没有弹出，但页面重新加载了。我想阻止页面重新加载并调用JS函数。

谢谢

- Sridhar

2

将输入更改为type="button" :: 在询问“如何”之前，请先查看How To。 - Edward J Beckett

@EddieB 一些浏览器仍然会使用“input type=button”提交。 - Explosion Pills

如果您正在使用纯JavaScript，则在函数末尾返回false; 这将防止表单提交。 - Mehavel

@ExplosionPills True :: 将输入更改为按钮类型="button"即可解决问题 :: 这里有一个“如何”指南 - Edward J Beckett

@EddieB 我甚至不认为那是真的；相当确定IE7仍会使用按钮类型按钮提交表单。 - Explosion Pills

现在这很有趣。为什么$MS会这样呢...;-) - Edward J Beckett

6个回答

32

正确的 jQuery 方式是：

$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

就像你所说的那样，你也可以移除 <form> 元素，并将 ajax 调用绑定到按钮的 click 事件上。

- Explosion Pills

很好的回答。在我看来，最好将所有JS代码与HTML标记分开。这是一个带有工作示例的钢笔：http://codepen.io/martinkrulltott/pen/yNZJbp - Martin

1

使用 jQuery.post，并更改提交按钮。

提交按钮是用于通过POST（原始方法，非ajax）将数据发送到服务器的，我建议仅在特殊情况下使用它，例如上传文件时。

如果您继续使用提交按钮进行ajax请求，您将在IE中遇到许多问题。

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script language="javascript">
            function makeSearch()
            {
                if(validateIdata())
                {
                    alert("send ajax request");
                    return;
                    $.ajax({    
                      type: 'POST',
                      url: url, //- action form
                      data: {name1:$('#name1').val(),age1:$('#age1').val()},
                      success: function(){
                        alert('success');
                      }
                    });
                }
            }

            function validateIdata()
            {
                if($('#name1').val() =='')
                {
                    alert("Invalid Name");
                    return false;
                }

                if($('#age1').val() =='')
                {
                    alert("Invalid Age");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form name="search" >
        Name: <input type="text" id="name1" name="name1"/>
        Age: <input type="text" id="age1" name="age1"/>
        <input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
    </form>
    </body>
    </html>

- greg

1

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>

function makeSearch(){
alert("Code to make AJAX Call");
}

只需在onclick函数中使用return，这对您会有好处。

- Bkay

0

document.getElementById("bt1").type='submit';
                    document.getElementById("bt1").onclick="";
                    var elem = document.getElementById("bt1");
                    if (typeof elem.onclick == "function") {
                        elem.onclick.apply(elem);
                    }


<form id="org" action="">
                        <fieldset class="log">
                            <legend>Log in</legend>
                            <label for="uname">Username</label>
                            <input type="text" name="uname" id="uname" value="" required/><br />
                            <label for="pword">Password</label>
                            <input type="password" name="pword" id="pword" value="" required/><br />
                            <input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
                        </fieldset>
                    </form>

- Rahul Akula

-3

终于我得到了答案

$("form").live("submit", function() {
        makeSearch();
        return false;
    });

- Sridhar

这不是渐进式的 :: 如果js被禁用，它将会提交。请查看我在第一条评论中提供的链接。 - Edward J Beckett

如果我移除提交按钮，客户端验证将不会执行。所以我不应该移除它。而且我在我的项目中使用了上述代码，它完美地工作着...... - Sridhar

你不需要一个提交按钮来进行验证...你可以自己编写验证代码。参考：自定义验证 - Edward J Beckett

.live很糟糕，还有：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ - Explosion Pills

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Miqdad Ali · Accepted Answer

在 form 标签上添加 onsubmit 属性：

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

并且JavaScript在结尾处添加了return false：

function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}