1

我对 JQuery 有点陌生。假设我们有这个 jquery 函数：

var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
    $("#postResult").html(data);
});

这种形式：

<form id="myForm" action="/Monitor/Test/FormPost" method="post">
    <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
    <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
    <div>Age: <input name="Age" type="text" value="43" /></div>
    <input type="submit" value="Save Contact" />
    <div id="postResult">?</div>
</form>

如何将保存按钮与 jquery 函数绑定？谢谢

4

3 回答 3

2

一种简单的方法是绑定到按钮的单击事件。像这样的东西：

$('#myForm input[type="submit"]').click(function () {
    var f = $("#myForm");
    var url = f.attr("action");
    var formData = f.serialize();
    $.post(url, formData, function(data) {
        $("#postResult").html(data);
    });
});

这专门查找作为 id "myForm" 形式的子项的提交输入（如果有其他按钮等），并使用相关函数响应其单击事件。

为了安全起见，由于您实际上是在通过 AJAX 使表单短路并发布，因此您还应该将其更改submit为 normal button：

<input type="button" value="Save Contact" />

也许：

<button value="Save Contact" />

这会将您的 jQuery 选择器更改为：

$('#myForm input[type="button"]')

或者：

$('#myForm button')
于 2013-06-25T22:41:13.880 回答
2 
$(document).on("click","input[type=submit]",function(e)
        {
          e.preventDefault();
          var form = $(this).closest("form");
          $.post(form.attr("action",form.serialize(),function(d){
            //result
          });
        });

更一般的方式。

于 2013-06-25T22:42:52.047 回答
1 
//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
   e.preventDefault();
   var $this = $(this);
   var f = $this.parents('form');
   var url = f.attr("action");
   var formData = f.serialize();
   $.post(url, formData, function(data) {
       $("#postResult").html(data);
   });

   return false;
})

在此代码中，您正在订阅点击事件。 [e.preventDefault();][1]将阻止您的表单过早提交，您可以做您想做的工作。

于 2013-06-25T22:38:40.237 回答