代码之家 › 专栏 › 技术社区 › Mark Kadlec

如何使用jquery发布表单?

asp.net-mvc jquery javascript

Mark Kadlec · 技术社区 · 14 年前

我有一个带有提交按钮的表单,它工作正常,但是我现在有一个用户请求,如果单击了页面上的链接并且表单是“脏的”,那么就保存表单(发布到保存操作)。

我已经通过使用is dirty javascript变量实现了逻辑,现在我想在表单变脏时从javascript函数发布表单。

我的表格声明如下:

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

我的javascript是:

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

继续操作没有被调用,但是当我单击表单上的提交按钮时,它可以正常工作。我在javascript中做了什么错误?

注: 对checklink()的调用工作正常,最终的问题是$(formsmart”).submit()没有发布到继续操作。

3 回复 | 直到 14 年前

Kelsey 14 年前

根据您发布的内容和姓名匹配,您有正确的提交表单的方法。

你确定你在打电话吗 checkLink 而且是 isDirty 等于 true ?

放置和 alert('Test'); 在你提交之前 if 范围。

编辑: 要连接您的活动,您需要执行以下操作:

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

注意 return false 这将导致链接无法执行导航。如果您想让链接导航,只需删除该部分即可。

p.campbell 14 年前

听起来要求“点击页面上的链接”。

可能将此事件附加到 <a> 页面上的标签。

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

Avi Pinto 14 年前

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

难看的解决方案:
你可以这样做:把点击的URL保存在一个隐藏的字段中,
返回false停止导航,
提交后,检查其中的值,如果存在,则进行导航。

更好的解决方案:
通过Ajax发布表单,在Ajax调用完成后(无需检查成功或错误),执行导航(为了使其非常简单,只需使用AjaxForm ajaxForm plugin )
这个解决方案的唯一问题是,如果链接有target=“_blank”,因为您必须使用window.open,它可能被弹出窗口阻止程序阻止。
you can play with a simple jsbin sample i prepared showing this

这个例子将一些值发布到这个页面的旧版本+导航到Google,打开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
  });
});â