Question

我对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函数绑定？谢谢

Answer 1

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

$('#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”形式的子项（如果有其他按钮等），并使用相关函数响应其click事件。

为了安全起见，因为您基本上是通过AJAX缩短表单并发布，所以您也应该将submit更改为正常button：

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

或者也许：

<button value="Save Contact" />

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

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

或者：

$('#myForm button')

Answer 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
          });
        });

更一般的方式。

Answer 3

//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]会阻止您的表单过早提交，您可以完成所需的工作。

使用AJAX发布Asp.net表单

3 个答案: