Want HTML form submit to do nothing
JavascriptHtmlAjaxFormsSubmitJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
<form id="my_form" onsubmit="return false;">
is enough ...
Solution 3 - Javascript
It also works:
<form id='my_form' action="javascript:myFunction(); return false;">
Solution 4 - Javascript
How about
<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
......
</form>
Solution 5 - Javascript
You can use the following HTML
<form onSubmit="myFunction(); return false;">
<input type="submit" value="Submit">
</form>
Solution 6 - Javascript
<form onsubmit="return false;">
Solution 7 - Javascript
Use jQuery. Maybe put a div around your elements from the form. Then use preventDefault() and then make your Ajax calls.
Solution 8 - Javascript
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.
Solution 9 - Javascript
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>
Solution 10 - Javascript
Just replace 'action=""' withonsubmit='return false'. That's it.