Here is my code, as simple as it gets:
<form action="">
<input type="text">
<input type="submit" value="submit">
</form>
$("form").submit(function(e){
e.stopPropagation();
e.preventDefault();
e.submit(); // tried also: $(this).submit()
});
What am I doing wrong here? why doesn't it send?
e.target.submit();
If you call the submit on the native element, rather than the jQuery element, the jQuery event handlers will be ignored.
remove preventDefault, it will prevent form submission.
$("form").submit(function(e){
e.stopPropagation();
//e.preventDefault();
return true;
});
You should use the .submit() method on the form directly:
$("form").submit();
The way your code is written now you are handling the submit event of the form and trying to submit it. If you inspected e you would see that it is an event and not the actual form. Your form is submitting just by clicking the submit button. If you wanted to prevent that and do something before submitting it, do something like this:
<form action="" id="myForm">
<input type="text">
<input type="button" value="submit" id="myButton">
</form>
$("#myButton").click(function(){
$(this).stopPropagation();
$(this).preventDefault();
//do what you need to do
$("#myForm").submit();
});
In your original code if you do actually submit the form at the end it will result in an infinite loop.
Related
I'm trying to prevent a form from being submitted twice. I'm doing that by catching clicks on a submit button and disabling it while the form submit goes on in the background.
Here's a very basic example of the code I'm using:
$("button").click(function(){
$(this).attr("disabled","true").html("Wait here while posted...");
});
Working example:
http://jsfiddle.net/t93Vw/
This works perfectly in firefox and IE, but in chrome the form is not submitted.
Why is this different behaviour, and does anyone have a quick fix?
If you want to submit a form then you should use onsubmit event:
$("form").submit(function () {
$(':submit', this).prop("disabled", true).html("Wait here while posted...");
});
onclick is for click, form has a special event for submission. Advantage is that it will properly behave on Enter key submit.
Demo: http://jsfiddle.net/t93Vw/1/
Try .prop( propertyName, value ) and don't wrap true in quotes
value Type: String or Number or Boolean A value to set for the property.
$("button").click(function (e) {
e.preventDefault(); //stop default behavior of form submit
$(this).prop("disabled", true) // disable button
.text("Wait here while posted...") //change text of button
.closest('form').submit();//find closest form and submit it
});
.closest()
event.preventDefault()
Fiddle Demo
The type of the button may be the reason ... try this
<form action="/test" method="post">
<input type="text" name="somefield"/>
<button id="submitbutton">Send</button>
</form>
$("button").click(function(){
$(this).prop("disabled",true).html("Wait here while posted...")
.parent().get(0).submit();
e.preventDefault();
});
Not quite sure what's the error but maybe this will help?
$("button").click(function(e){
e.preventDefault();
$(this).attr("disabled","true").html("Wait here while posted...");
});
For it to work on chrome, do the following updates in your codes:
(1) your form
<form action="/test" method="post" id="myForm">
<input type="text" name="somefield"/>
<button id="submitbutton" type="submit">Send</button>
</form>
(2) Use jquery to submit the form:
$("button").click(function(){
$('form#myForm').submit();
$(this).attr("disabled","true").html("Wait here while posted...");
});
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;">
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.
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.
I have a search that operates by AJAX. It works perfectly well when the user presses the search button, the problem is... if the user presses enter... it submit the form rather than executing the AJAX javascript function. How can I make the Enter button call my AJAX function as opposed to submitting the form?
Use the form's onsubmit event to execute your ajax call and make the button into a submit button if it isn't already.
Example HTML
<form action="/search.php" onsubmit="submitAjaxQuery(event)">
<input type="text" name="keywords" />
<button type="submit">Go!</button>
</form>
Example JS
function submitAjaxQuery(event)
{
if (event.preventDefault)
event.preventDefault();
else
event.cancel = true;
// run ajax calling function here.
}
Here is a simple DOM way to handle this:
<form action="javascript:void(0)">
<input type="text" />
<input type="submit" onclick="doSomething(this.form)">
</form>
<script>
function doSomething(form){
alert('form submitted');
}
</script>
Place the cursor in the input field, and either if you click the button or type enter, the form is submitted by javascript (not the page)
Trap it in the onSubmit method of the form and return false.
With jQuery:
jQuery("#myform").submit(function() {
callAJAXFunction();
return false;
});
The correct way is to let the non-javascript users use the form submit with page refresh but a javascript call for those with javascript:
<form action="yourscript.php" method="post" onsubmit="doSomething(this.form); return false;">
<input type="text" />
<input type="submit" />
</form>
<script>
function doSomething(form){
alert('form submitted');
}
</script>