HTML: JavaScript: Block Form submission and call Javascript function

Question

I want to make AJAX call when a submit button in the form pressed. InFact I cant remove the <form> because I want to made clientside validation also. I tried this code.

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JS

function makeSearch(){
alert("Code to make AJAX Call");
}

After using this code alert() not showing but the page is reloaded. I want to block the page reload and call the JS function.

Thanks

Change the input to type="button" :: Please review before asking [How To](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Edward J Beckett, Jan 23 '13 at 04:44
@EddieB some browsers will still submit with `input type=button` — Explosion Pills, Jan 23 '13 at 04:48
If you are using pure javascript then at the end of the function return false; which will prevent the form from submit — Mehavel, Jan 23 '13 at 04:48
@ExplosionPills True :: Changing the input to a button type="button" would work :: [Here's a 'How To'](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Edward J Beckett, Jan 23 '13 at 04:51
@EddieB I don't even think that's true; pretty sure IE7 will still submit forms with button type button — Explosion Pills, Jan 23 '13 at 04:54

score 52 · Accepted Answer · edited Feb 10 '15 at 19:31

52

Add the onsubmit attribute to the form tag:

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

And javascript add return false at the end:

function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}

edited Feb 10 '15 at 19:31

Jens

8,423
9
58
78

answered Jan 23 '13 at 05:16

Miqdad Ali

6,129
7
31
50

1

Not only is `onclick` bad, but also: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – Explosion Pills Jan 23 '13 at 14:07
@ExplosionPills... why is `onclick` bad? – zipzit Sep 09 '15 at 13:50
If you want to use 'onclick' input type should be "button" instead of "submit" – Miqdad Ali Sep 16 '15 at 17:37
If i add a function before return false it still submit form. Eg.: function mySubmitFunction() { checkElements(); return false; } – João Costa Apr 13 '17 at 12:53
Nevermind, was a bug on code and wasn''t showing the error on console. – João Costa Apr 13 '17 at 13:05

Explosion Pills · Answer 2 · 2013-01-23T14:09:46.043

32

The correct, jQuery way would be:

$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

Like you said, you could also remove the <form> element and just bind the ajax call to the button's click event.

edited Jan 23 '13 at 14:09

answered Jan 23 '13 at 04:43

Explosion Pills

188,624
52
326
405

Great answer. IMO it's much better to keep the all the JS separated from the HTML markup. Here's a pen with a working example: http://codepen.io/martinkrulltott/pen/yNZJbp – Martin Aug 05 '15 at 02:00

score 1 · Answer 3 · answered Jan 23 '13 at 05:12

use jQuery.post, and change submit button.

Submit button is create for send data to server via POST (native method, not ajax), I suggest using it only in special cases, for example when uploading a file.

If you continue use submit button for ajax request you will have many problems with IE.

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script language="javascript">
            function makeSearch()
            {
                if(validateIdata())
                {
                    alert("send ajax request");
                    return;
                    $.ajax({    
                      type: 'POST',
                      url: url, //- action form
                      data: {name1:$('#name1').val(),age1:$('#age1').val()},
                      success: function(){
                        alert('success');
                      }
                    });
                }
            }

            function validateIdata()
            {
                if($('#name1').val() =='')
                {
                    alert("Invalid Name");
                    return false;
                }

                if($('#age1').val() =='')
                {
                    alert("Invalid Age");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form name="search" >
        Name: <input type="text" id="name1" name="name1"/>
        Age: <input type="text" id="age1" name="age1"/>
        <input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
    </form>
    </body>
    </html>

score 1 · Answer 4 · answered Jan 23 '13 at 05:38

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>

function makeSearch(){
alert("Code to make AJAX Call");
}

just use return in onclick function it will do good for u

score 0 · Answer 5 · answered Dec 10 '14 at 12:25

document.getElementById("bt1").type='submit';
                    document.getElementById("bt1").onclick="";
                    var elem = document.getElementById("bt1");
                    if (typeof elem.onclick == "function") {
                        elem.onclick.apply(elem);
                    }


<form id="org" action="">
                        <fieldset class="log">
                            <legend>Log in</legend>
                            <label for="uname">Username</label>
                            <input type="text" name="uname" id="uname" value="" required/><br />
                            <label for="pword">Password</label>
                            <input type="password" name="pword" id="pword" value="" required/><br />
                            <input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
                        </fieldset>
                    </form>

score -3 · Answer 6 · answered Jan 23 '13 at 04:46

-3

Finally I got the answer

$("form").live("submit", function() {
        makeSearch();
        return false;
    });

answered Jan 23 '13 at 04:46

Sridhar

2,228
10
48
79

That's not progressive :: if js is disabled it will submit. Please see the link I provided in the first comment. – Edward J Beckett Jan 23 '13 at 04:47
If I removed the submit button, clientside validation will not execute. so I am not supposed to removed that. And I use the above code in my project It is perfectly working...... – Sridhar Jan 23 '13 at 05:30
You don't need to have a submit button for validation ... you can roll your own validation ref: [Custom Validation](http://stackoverflow.com/questions/4751780/best-javascript-solution-for-client-side-form-validation-and-interaction/4752092#4752092) – Edward J Beckett Jan 23 '13 at 06:55
`.live` is bad, and also: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – Explosion Pills Jan 23 '13 at 14:08

HTML: JavaScript: Block Form submission and call Javascript function

6 Answers6

Linked