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.

Answer 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>

Answer 2

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

is enough ...

Answer 3

It also works:

<form id='my_form' action="javascript:myFunction(); return false;">

Answer 4

<form onsubmit="return false;">

Answer 5

How about

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

Answer 6

You can use the following HTML

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

Answer 7

Use jQuery. Maybe put a div around your elements from the form. Then use preventDefault() and then make your Ajax calls.

Answer 8

Use:

<form action='javascript:functionWithAjax("search");'>
  <input class="keyword" id="keyword" name="keyword" placeholder="input your keywords" type="search">
  <i class="iconfont icon-icon" onclick="functionWithAjax("search");"></i>
</form>

<script type="text/javascript">
  function functionWithAjax(type) {
    // Ajax action

    return false;
  }
</script>

Answer 9

In cases where 'return false' doesn't do a thing,

try just passing the event to the form's onsubmit (not action!)

and simply add event.preventDefault() in that function.

Leave the 'action' from the html. Additional info: action="javascript:etc(event)" didn't work in my tests.

Answer 10

As part of the button's onclick event, return false, which will stop the form from submitting.

I.e.:

function doFormStuff() {
    // Ajax function body here
    return false;
}

And just call that function on submit button click. There are many different ways.

Answer 11

You can use preventDefault to prevent the form's default submit behaviour from firing

form.addEventListener('submit', myHandler);


function myHandler(event) {
  event.preventDefault();

}

Answer 12

Just replace 'action=""' withonsubmit='return false'. That's it.