Want HTML form submit to do nothing

Question

I want an HTML form to do nothing after it has been submitted.

action=""

is no good because it causes the page to reload.

Basically, I want an Ajax function to be called whenever a button is pressed or someone hits Enter after typing the data. Yes, I could drop the form tag and add just call the function from the button's onclick event, but I also want the "hitting enter" functionality without getting all hackish.

Solution 1

By using return false; in the JavaScript code that you call from the submit button, you can stop the form from submitting.

Basically, you need the following HTML:

<form onsubmit="myFunction(); return false;">
    <input type="submit" value="Submit">
</form>

Then the supporting JavaScript code:

<script language="javascript"><!--
    function myFunction() {
        // Do stuff
    }
//--></script>

If you desire, you can also have certain conditions allow the script to submit the form:

<form onSubmit="return myFunction();">
    <input type="submit" value="Submit">
</form>

Paired with:

<script language="JavaScript"><!--
    function myFunction() {
        // Do stuff
        if (condition)
            return true;

        return false;
    }
//--></script>

Solution 2

<form id="my_form" onsubmit="return false;">

is enough ...

Solution 3

<form onsubmit="return false;">

Solution 4

You can use the following HTML

<form onSubmit="myFunction(); return false;">
  <input type="submit" value="Submit">
</form>

Solution 5

How about

<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
 ......
</form>

View more solutions

Comments

[John Kugelman]

Missing function keyword: function myFunction() { }

[Neil]

You should really explain the code a bit. It'll turn a good answer into a great one.

[charliefortune]

You should add some explanation of what your solution does.

[PYK]

I don't think it'll work over a POST FIELD specially using JS to submit the form; can you give us a jsfiddle demo please?

[AfterMath]

Is the myFunction() needed? In other words, can one not simply do <form onsubmit="return false;"> ?