Question

I’m developing an web application using asp.net MVC and jQuery. I have in my page 10 forms and I’m using jQuery (live events) to do a async submit them. Something like this:

Everything works fine, but I need to format a Div with an image and when user clicks on this div I need to submit the form, but… the form is not executing the async operation like the submit button. It’s executing default behavior…

My div is something like this:

My Script:

$("#jobs form").live('submit', function() {
   $.post($(this).attb('action'), $(this).serialize(), function(result) {
     //get and format result in my content divs...
   });
});

My HTML:

<div id="jobs">
<% foreach(var job in Model) { %>
<form ...>
  <!-- hide this button -->
  <input type='submit' class='hide' id='mysubmitButton_<%=job.Id%>' />
  <!-- need to submit this form -->
  <div class='buttonImage' onclick="$('#mysubmitButton_<%=job.Id%>').click();"></div>
</form>
<% } %>
</div>

How can I set in ‘onclick’ to do a assync submit like the Submit Button in my page?

I don’t know how to format this button, So I’m using an div or a hyperlink…

Thanks

Answer 1

Firstly, you have $.post($(this).attb('action'), .... This won’t work — the function is attr, so you need $.post($(this).attr('action'), .... Even better would be to avoid the jQuery object and use $.post(this.action, ....

For your submit image, the following code should work:

$('.buttonImage').live('click', function(){
    $(this).closest('form').submit();
});

This will find the parent form and call the submit action on it, which should trigger the handler you defined in your question.

Just to note that it doesn’t appear that you are preventing the default action occuring. You need to call your live method on the form like this:

$("#jobs form").live('submit', function(e) {
    e.preventDefault();
    // do the rest of your code
}

This prevents the default submit action occuring.