如何使用jQuery发布表单？

我有一个提交按钮的表单，它工作正常，但我现在有一个用户请求，如果单击页面上的链接并且窗体是“脏的”，表单将被保存（发布以保存操作）。如何使用jQuery发布表单？

我已经有了一个isDirty JavaScript变量的逻辑，现在我想从JavaScript函数发布表单，当它是脏的。

我的形式声明如下：

<form id="formSmart" action="<%= ResolveUrl("~/SmartForm/Proceed") %>" 
      method="post" enctype="multipart/form-data">

，我的JavaScript是：

function checkLink() { 
    if (isDirty) { 
    $("#formSmart").submit(); 
    } 
}

的进行操作不会被调用，但是当我点击提交表单它按钮工作正常。我在做什么JavaScript错误？（）“＃formSmart”）。submit（）;这个函数调用了checkLink（）方法。不会发布到“继续”操作。

来源

2010-09-09 Mark Kadlec

您有正确的方式根据您发布的内容和名称匹配来提交表单。

您确定您要拨打checkLink，并且是isDirty等于true？

把你和alert('Test');提交之前，并在if范围内。

编辑：来装你的活动，你需要做到以下几点：

$('#yourLinkID').click(checkLink(); return false;);

注return false这将导致你的链接到不执行导航。如果你想链接导航，你可以删除该部分。

来源

2010-09-09 22:15:31 Kelsey

是的，我已经添加了警报（），它是射击，没有错误被抛出，但我的控制器行动中的断点不会受到打击。当我点击提交时，断点被击中。 – 2010-09-09 22:29:12

但我总是希望我的表单导航，只是想执行提交（它保存字段），但由于某种原因，我的控制器后没有被调用。 – 2010-09-09 22:32:49

@Mark Kadlec你能否验证$（“＃formSmart”）没有返回正确的表单？一些东西看起来很奇怪，因为一切看起来应该是工作...也许它是如此简单的事情，我们都俯瞰它...需要新鲜的眼睛:) – Kelsey 2010-09-09 22:43:45

听起来像要求是'点击页面上的链接'。

也许将此事件附加到页面上的所有<a>标记。

$(document).ready(function() { 
    // all <a> tags get the checkLink attached to them 
    $("a").click(checkLink()); 
});

来源

2010-09-09 22:14:40

我想如果单击了超链接，则调用该函数，所以我可以以任何方式调用该函数（以某种方式在关闭的事件或onc上舔事件）。 – 2010-09-09 22:27:47

我基本上试图消除从窗体中的数据丢失，并强制提交，如果窗体很脏 – 2010-09-09 22:28:13

你的问题是浏览器在页面执行提交之前导航。
解决方案暂停导航，直到您保存表单。

丑陋的解决方案：
你能做到这一点买节省了广告点击的网址，在一个隐藏字段，
返回false停止导航，
和之后的值有提交检查，如果存在的话做导航

更好的解决方案：
通过AJAX发布形式和Ajax调用完成后（无需检查成功或错误）进行导航（使它很容易只使用给ajaxForm ajaxForm plugin）
此解决方案的唯一问题是，如果链接有target =“_ blank”，因为那么您必须使用窗口。开放可能通过弹出窗口拦截
you can play with a simple jsbin sample i prepared showing this

这个例子可以阻止张贴一些值到旧版本本页面+导航到谷歌，打开Fiddler并看到它的第一篇文章，然后导航。

如果你去了jsbin页面终止阅读这里
下面是HTML：

<form id="formSmart" action="http://jsbin.com/oletu4/edit" method="post"> 
<input type="text" name="someLie" /> 
<input type="text" name="someLie2" /> 
<input type="submit" value="submit" /> 
<a id="lnkNavOut" href="http://www.google.com">www.google.com</a>

这里是JS：

$(document).ready(function(){ 
    $("#lnkNavOut").click(function(){ 
    var jqFormSmart = $("#formSmart"); 
    //check here if the form is dirty and needs to be saved 
    var jqClickedLink = $(this); 
    $.ajax({ 
      url: jqFormSmart.attr("action"), 
      type: "POST", 
      data:jqFormSmart.serialize(), 
      complete:function(){ 
      location = jqClickedLink.attr("href"); 
      } 
     }); 
    return false;//stop navigation 
    }); 
});

来源

2010-09-13 07:42:04

谢谢Avi，我非常欣赏Ajax解决方案，看起来不错。 – 2010-09-14 01:51:36

如何使用jQuery发布表单？

回答

相关问题