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;">

足够的 ...

Answer 3

它也有效：

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

Answer 4

How about

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

Answer 5

You can use the following HTML

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

Answer 6

<form onsubmit="return false;">

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

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

Ie:

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

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

Answer 9

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 10

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 11

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