How do i stop the form from reloading using Javascript? - javascript

When a User Submits the form i want to stop the default behavior of the form. ie it should not reload. so that i can perform the AJAX request.
here is the code i used.
<script type="text/javascript">
function validateForm()
{
return false;
}
</script>
<form action="" name="contact" onsubmit="validateForm();">
<input type="text" name="name" value="Enter Your Name..."/>
<input type="submit" name="submit"/>
</form>
this does not stop the form from being submitted or reloaded. how do i achieve this?

It needs to be onsubmit="return validateForm()"

You can use the onsubmit attribute as suggested, a more unobtrusive way is to use preventDefault() on the event object passed to the function bound to your onsubmit event:
function validateForm(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false; // for IE
}
This only works if you bind the event listener to the form, instead of having onsubmit inline.
Edit: here's how you could bind an event listener to the form, which when triggered will pass an Event object (note this is the W3C style, this won't work in IE, but will give you an idea):
var form = document.getElementById('myform');
form.addEventListener('submit', validateForm, false);
When the submit event is triggered, it will call the validateForm function, passing the event object. Here's a really good article on Javascript events:
http://www.quirksmode.org/js/introevents.html

You should use a return in the onsubmit hanlder of the form.
Try this version:
<script type="text/javascript">
function validateForm()
{
return false;
}
</script>
<form action="" name="contact" onsubmit="return validateForm();">
<input type="text" name="name" value="Enter Your Name..."/>
<input type="submit" name="submit"/>

add a return in your event handler:
onsubmit="return validateForm();"
Otherwise the function executed, but doesn't tell the browser to halt processing.

Using jQuery:
$('form').on('submit', function() {
// call functions to handle form
return false;
});
Basically the same as the above solutions, but I prefer to keep my JS out of my HTML, even the "onsubmit" attribute.

Related

How to display an alert after checking the input from? [duplicate]

I need to select a form via native javascript (not jQuery) and prevent the form submission (preventDefault).
The trick is that the form does not have a name or id, and cannot be assigned one.
My HTML:
<div id="search">
<form method="get">
<input type="text" name="post"/>
<input type="submit" value="Post">
</form>
</div>
So far, I have tried to use document.forms[0] and document.getElementsByTagName("form")[0] to select the form, but the value returned is undefined.
Another possible solution is to overload the functionality of the submit button, but I did not have success with that either.
Using querySelector and an event listener, it's almost like jQuery
document.querySelector('#search form').addEventListener('submit', function(e) {
e.preventDefault();
});
note that the script has to come after the elements, or use a DOM ready handler, so the elements are available.
FIDDLE
Simple way is use onsubmit event handler
<script>
var submitHandler = function() {
// your code
return false;
}
</script>
<form method="get" onsubmit="return submitHandler()">....</form>
or more easy
<form onsubmit="return false;">
on form submit just return false.
e.g. <form onsubmit="return false">

How to stop form being submitted?

I'm using an asp.net webform page. I have some javascript that checks if some dynamically generated fields have values and then displays a message if not. The problem is that I haven't found a way to stop the form from being submitted when this check fails.
<form id="myform" name="myform" runat="server" onsubmit="finalCheck();">
I've tried button and input types:
<button type="submit">submit</button>
<input type="submit" value="submit"/>
The finalCheck() method always executes and does return false. But the form goes anyways.
Is there something else I need to do to prevent the form from being submitted?
write your html like this:
<form id="myform" name="myform" runat="server" onsubmit="finalCheck(event);">
then into your finalCheck(event) write this, on the first line for good practices:
event.preventDefault();
that will stop the submit and you can add more code after the preventDefault function to process the form data
The code in the event handler has to return the value from the function that it calls:
onsubmit="return finalCheck();"
The event handler function needs to return false. That function is onsubmit, not finalCheck.
onsubmit="return finalCheck();"
If you were using modern code, you could call preventDefault on the event object instead.
<script>
document.getElementById('myform').addEventListener('submit', finalCheck);
function finalCheck(event) {
var myForm = this;
// do stuff
event.preventDefault();
}
</script>

Stop form submit with native javascript

I need to select a form via native javascript (not jQuery) and prevent the form submission (preventDefault).
The trick is that the form does not have a name or id, and cannot be assigned one.
My HTML:
<div id="search">
<form method="get">
<input type="text" name="post"/>
<input type="submit" value="Post">
</form>
</div>
So far, I have tried to use document.forms[0] and document.getElementsByTagName("form")[0] to select the form, but the value returned is undefined.
Another possible solution is to overload the functionality of the submit button, but I did not have success with that either.
Using querySelector and an event listener, it's almost like jQuery
document.querySelector('#search form').addEventListener('submit', function(e) {
e.preventDefault();
});
note that the script has to come after the elements, or use a DOM ready handler, so the elements are available.
FIDDLE
Simple way is use onsubmit event handler
<script>
var submitHandler = function() {
// your code
return false;
}
</script>
<form method="get" onsubmit="return submitHandler()">....</form>
or more easy
<form onsubmit="return false;">
on form submit just return false.
e.g. <form onsubmit="return false">

jQuery not preventing form from being submitted

I want to prevent a form from being submitted using jQuery and instead run a function when the user wants to submit.
Here's my forms markup:
<form action="" method="post" id="msg-form">
<p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>
And my Javascript code:
$('#msg-form').submit(function() {
return false;
}
However, when I press the submit button, the form still gets sent and the page refreshes. How can I properly prevent the form from submitting?
It seems the event handler is not even executed, thus I assume the form could not have been found. Try enclosing your code within handler executed when the DOM is ready. In jQuery it can be simply done like that:
$(function(){
$('#msg-form').submit(function(event) {
event.preventDefault();
// code executed when user tries to submit the form
});
});
Also, as you can see above, you can prevent default behaviour of the form when it is being submitted.
The submit event is not actually being bound to the form element. You may have forgotten to bind it after the DOM was loaded!
Put the event binding inside of $(document).ready(function() { or load the script at the bottom of the page (after all of the elements have loaded).
$('#msg-form').submit(function(e){
e.preventDefault();
});
You could not give the users a real submit button and only submit the form using JS after validation:
HTML
<form action="" method="post" id="msg-form">
<p><textarea name="msg"></textarea><input id="submit" type="button" value="Send"></p>
</form>
JS
$('#submit').on('click', function() {
// validate
$('#msg-form')[0].submit();
});
Try:
$("#msg-form").submit(function (e) {
e.preventDefault();
});
This works
<form action='' onsubmit="return false;">
As does this
<form action='' onsubmit="doSomeWork();return false;">

Want HTML form submit to do nothing

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.
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>
<form id="my_form" onsubmit="return false;">
is enough ...
It also works:
<form id='my_form' action="javascript:myFunction(); return false;">
<form onsubmit="return false;">
How about
<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
......
</form>
You can use the following HTML
<form onSubmit="myFunction(); return false;">
<input type="submit" value="Submit">
</form>
Use jQuery. Maybe put a div around your elements from the form. Then use preventDefault() and then make your Ajax calls.
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>
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.
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.
You can use preventDefault to prevent the form's default submit behaviour from firing
form.addEventListener('submit', myHandler);
function myHandler(event) {
event.preventDefault();
}
Just replace 'action=""' withonsubmit='return false'. That's it.

Categories