How to post form using jQuery?

Question

I have a form with a submit button and it works fine, but I now have a user request to make the form get saved (posted to save action) if a link on the page is clicked and the form is "dirty".

I've got the logic in place by having an isDirty JavaScript variable, now I would like to post the form from the JavaScript function when it is dirty.

My form declaration is as follows:

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

and my JavaScript is:

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

The proceed action doesn't get called, yet when I click the submit button on the form it works fine. What am I doing wrong in the JavaScript?

Note: The call to checkLink() works fine, the ultimate problem is that $("#formSmart").submit(); is not posting to the Proceed action.

Answer 1

Sounds like the requirement is that 'a link on the page is clicked'.

Perhaps attach this event to all the <a> tags on the page.

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

Answer 2

You have the correct way of submitting the form based on what you have posted and the names match up.

Are you sure you are calling checkLink and is isDirty equal to true?

Put and alert('Test'); right before you submit and in the if scope.

EDIT: To hookup your event you need to do the following:

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

Note the return false which will cause your link to not execute a navigate. If you want the link to navigate, you can just remove that part.

Answer 3

your problem is that the browser navigate before the page performs your submit.
the solution is suspending the navigation till you save the form.

The UGLY solution:
you could do it buy saving the clicked url at a hidden field,
returning false to stop the navigation,
and after submit check for a value there and if it exists do navigation

A better solution:
post the form via ajax and after the ajax call completes(no need to check for success or error) perform the navigation(to make it really easy just use ajaxForm ajaxForm plugin)
the only problem with this solution is if the link has target="_blank" because then you have to use window.open which might be blocked by popup blockers
you can play with a simple jsbin sample i prepared showing this

this example post some values to an older version of this page + navigate to google, open fiddler and see that it first post and then navigate.

If you went to the jsbin page stop reading here
here is the 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"&gt;www.google.com&lt;/a&gt;

here is the 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
  });
});​