Ajax Form submit with preventDefault

Question

I have a normal HTML form in which it is supposed to prevent default form submit and post the values by Ajax. It is not working with my setup Please help me where I went wrong. See me as Novice in Jquery,javascrip

 <link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.css">

<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery-ui.css">
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.js">     </script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.form.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.js"></script>
<script type="text/javascript">
    $(function(){

       $("select").multiselect({
          selectedList: 4
       });

    });
</script>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });

    ev.preventDefault();
});

My Form looks like

<form action=index1.php id="contactForm1" method="post">
<p>
    <select name="example-list[]" multiple="multiple" style="width: 400px; display: none;">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>

    </select>
</p>
<input class="text"  type="submit"  value='GO'>
 </form>
 </body>
 </html>

AFAIK, `ev.preventDefault();` should come at first. and also you should wrap your code in dom ready event. — Mr_Green, Dec 03 '13 at 13:45

score 23 · Answer 1 · answered Dec 03 '13 at 13:47

23

Wrap your code in DOM Ready

$(function () {
    var frm = $('#contactForm1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });
        ev.preventDefault();
    });
});

answered Dec 03 '13 at 13:47

Tushar Gupta - curioustushar

58,085
24
103
107

1

I would move the preventDefault to before the Ajax to not have the form submit normally in case of error in the ajax part – mplungjan Jan 23 '18 at 12:16

score 2 · Answer 2 · edited Jul 27 '18 at 07:16

2

$('#submit').click(function(e){

    //call ajax

e.preventDefault();
})

edited Jul 27 '18 at 07:16

anothernode

5,100
13
43
62

answered Jul 27 '18 at 06:58

swathi

97
1
2

score 0 · Answer 3 · answered Jul 27 '18 at 07:23

Is your page refreshing when you submit the form even with preventDefault()?

On you form, put # in the action attribute and remove method.
Modify your JS code

var frm = $('#contactForm1'); frm.submit(function (ev) { ev.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); } }); });

Put preventDefault before your ajax fires. Whats happening on your code is, your form is being executed with the action and method supplied in HTML, therefore your JS cannot catch it.

Jing · Answer 4 · 2013-12-03T13:52:45.507

-1

set the submit button as type="button" instead of type="submit",

and let's say the submit button has id submit-button. you can submit the form in javascript like this:

$("#submit-button").click(function(){ 
 //send ajax
})

edited Dec 03 '13 at 13:52

answered Dec 03 '13 at 13:45

Jing

161
3

Ajax Form submit with preventDefault

4 Answers4

Linked