Question

I have got this form:

<form action='/Admin/Update' method='post'>
    <input type='text' name='dataUpdate' value=" + $temp + " />
    <input type='submit' value='Update'/>
</form>

and this jQuery:

$("form[action$='Update']").submit(function () {
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

The form submits itself..and I want it to be an ajax call instead.

What am I doing wrong…

If some of you know mvc3 could you tell me if this will invoke my action?

[HttpPost]
public ActionResult Update(string data)
{
    string data2 = data;   
    return View(_gMenus.GetMyMenus());
}

Or is it not the way to send variables with jQuery to this method

UPDATE:

even if i do this..there is still postback:

    $("#submit_btn").click(function () {

    return false;
});

Maybe I should use the method live()?

Answer 1

Try using event.preventDefault() which stop all browser action.

$("form[action$='Update']").submit(function (event) {
    event.preventDefault();
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

Alternatively, you can change the submit button to a simple button like below,

<input type='button' id="submit_btn" value='Update'/>

and change the submit handler to click handler like below,

$(document).ready (function () {
  $("#submit_btn").on ('click', function () {    
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
  });
});

Edit:
You should use .on in below syntax for dynamic elements, (for jQuery v1.7)

$(document).ready (function () {
   $(document).on ("click", "#submit_btn", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});

Use .live for older versions,

$(document).ready (function () {
   $("submit_btn").live ("click", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});