How to prevent form submission with jQuery?

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()?

All your code looks good to me - make sure there isn't another error in the browsers console that isn't allowing the AJAX call to fire... — Alex, Mar 05 '12 at 15:52
The code looks ok. Try debugging this function and see if the submit event is triggered. If not, it means the selector is not good and maybe you should use an ID — Marius Ilie, Mar 05 '12 at 15:54

Selvakumar Arumugam · Accepted Answer · 2012-03-05T16:18:01.640

7

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;
   });
});

edited Mar 05 '12 at 16:18

answered Mar 05 '12 at 15:51

Selvakumar Arumugam

79,297
15
120
134

dammit...it still makes a postback – BlackFire27 Mar 05 '12 at 15:58
look at the update.. it doesnt work..I think that i should use the method live() – BlackFire27 Mar 05 '12 at 16:02
@BlackFire27 Did you change the button type to ="button" – Selvakumar Arumugam Mar 05 '12 at 16:08
I had to use live() function..cause the event detached itself.. does it detach itself whenever any other event fires? – BlackFire27 Mar 05 '12 at 16:09
@BlackFire27 mm.. seems like you are adding the content dynamically? Do you have a container div where this form is appended. if not you can use $(document).on ('click', '#submit_btn', function () { ... });. Check my edits. – Selvakumar Arumugam Mar 05 '12 at 16:19

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

If you are using MVC 3, then this sort of thing is already built in.

Your form would be

@using(Ajax.BeginForm()){
    // fields/inputs/submit button
}

Then include the relative Javascript files.

<script src="/js/libs/jquery.validate.min.js"></script>
<script src="/js/libs/jquery.unobtrusive-ajax.min.js"></script>
<script src="/js/libs/jquery.validate.unobtrusive.min.js"></script>

This will do what you need. Look into the Ajax.BeginForm for the various AjaxOptions which you can use.

Also check out; MVC 3 - Ajax.BeginForm does a full post back

edited May 23 '17 at 12:29

Community

1
1

answered Mar 05 '12 at 16:13

Tim B James

20,084
4
73
103

The problem that I plant everything dynamically with jquery..so i insert the form with jquery..I dont think that jquery can parse Razor...lol.. nice alternative solution though – BlackFire27 Mar 05 '12 at 16:16

score 0 · Answer 3 · answered Sep 04 '17 at 14:37

0

(Posted on behalf of the OP).

I figured it out, it works now:

    $("#submit_btn").live('click', function () {
    alert("succeeded");
    $.post($(this).attr("action"), { data: $('dataUpdate').val() });
    return false;
});

answered Sep 04 '17 at 14:37

halfer

19,824
17
99
186

How to prevent form submission with jQuery?

3 Answers3