<form action="/?wpmlmethod=offsite&list=2&wpmlformid=" method="post">
...
</form>
I tried:
<script type="text/javascript">document.forms[0].submit();</script>
But it didn't work.
You should submit it on some click event, etc, for example:
elem = document.getElementById('button_id');
elem.onclick = function(){
document.forms[0].submit();
};
Update:
As you said form is already filled, you want to submit it straight away, you can try this instead:
window.onload = function(){
document.forms[0].submit();
};
Note that forms[0] represents the first form on your page, if there are more than one forms on your page, you will need to specify the correct index for it eg forms[1], forms[2], etc
Make sure you call the submit method after the form exists (either by placing the script after the form or using an onload or onready event)
Make sure you do not have a form control (e.g. an input) with the name or id of submit as this will clobber the submit method with a reference to that HTMLElementNode.
That said, you probably shouldn't be loading a page just to instantly submit a form with JS in the first place. You should have already had all the information needed on the server when you built the form. It smells of bad design and can break the back button.
Related
Although I am able to call Javascript function on hitting the enter key. I am calling a function shortIt() when user hits the enter key, shortIt() takes the text from input box and makes a request to Google URL Shortener API which returns a short URL, but the generated response is visible for only some seconds.
I am showing the response in a div.
Seems to be very weird problem, code is here https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html
But when I click on shortIt button to short the url. It works fine and the response text stays in the div.
This is because on pressing the enter key, the form gets submitted. When this happens you will notice the page reloading. This is a default behaviour and is the consequence of using <form>. On form submission, the page in the forms action attribute is loaded. In this case the action attribute of the <form> is not set and so the page you are on is just reloaded, thus the script stops running and the page reloads.
Two straight forward options for fixing this:
(Simplest) Remove the form tag - it is not used to submit anything so removing it should leave things still working
Prevent the default action when the form submit event is fired.
With JQuery:
$('#myForm').on('submit', function (evt) {
evt.preventDefault(); // prevents form submission
});
Where myForm is the ID of your form tag. You will need add an id attribute to your existing html form tag: <form id="myForm" class="form-horizontal">
I'm doing a tutorial on making a chat server with Node.js and socket.io. Here's what I had in the html:
<form id='chat_form'>
<input id='chat_input' />
<button>Send</button>
</form>
<script type='text/javascript'>
var socket = io();
$('#chat_form').submit(function(){
var message = $('#chat_input').val();
socket.emit('messages', message);
$('#chat_input').val('');
});
</script>
I won't bother putting what I had on the back-end, because that part all worked fine. But in the browser, every time I submitted, the page refreshed, and a /? was added to the end of the URL bar.
Looked around for a bit, and found another tutorial (the one on the socket.io website), that had basically the same code, but they had added return false; to the end of their submit event. Tried that out and it worked fine. I'd like to understand why that worked though. Can anyone explain? Also, can you explain why the /? was added to the URL?
first about /?:
default method of form submit is GET, but you can change it with <form method="POST"> (while default is <form method="GET"> if method is not provided).
With POST form data is passed in request body, with GET - in request url params.
If you have
<form action="/submit.php" method="GET">
<input name="foo" value="1" />
<input name="bar" value="2" />
</form>
And you submit that form, you'll get URL something like /submit.php?foo=1&bar=2.
In your case you have no inputs with name attribute, so your GET params are "empty" (/?<params should go there>).
You can read more in:
http://www.w3schools.com/tags/att_form_method.asp
About return false;
Submitting form forces page reload (with either POST or GET request). If you submit form with javascript you need to prevent this default action. You can do this by
$('#chat_form').submit(function(event){
//....
event.preventDefault();
});
Or with return false;.
A simple and easy answer to this is
"Return false prevents navigation"
Return false is always used in those case where user or browser action needs to be stooped.
In every programming language, the code after return is not executed, which means further action wont take place, which can be
stopping form submit
stopping navigation and hyperlink jumps
other than return false you can also use
event.preventDefault();
event.stopPropagation();
Now about form submit
A form is submitted using GET and POST which can be decided by the author using method="POST" attribute in form tag,
when nothing given by default form submits using GET
which passes values in url - ex - something.html?para1=value1¶2=value2
which is fast and less secure, every time you submit a form with get all the form elements will be passed in the url
From the jQuery submit() docs:
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
So what's happening is, the default event behavior triggered when the submit event occurs is being prevented.
The default method of submission for the jQuery submit function is an HTML GET, which supplies the form paramaters as a URL query, in the form of /?queryParam=value. Hence, the /? appears in the URL, with no query parameters after the /? (as none are being supplied in the form).
Hope this helps!
Return false prevents all of the default functions of html element events from firing.
An example is an html form, once you hit the submit button it's default is to navigate to another page. You don't want that to happen if you are using Ajax functions to send data to a server without leaving the page.
Another way to do it is pass an event object parameter to the event function.
Then at the beginning of the function type event.preventDefault ();.
The following link offers a good explanation of why the trailing slash is present. https://webmasters.stackexchange.com/questions/35643/is-trailing-slash-automagically-added-on-click-of-home-page-url-in-browser
your form element has no method, so default method get is set. If you click send all the input elements are added after current page+?
return false prevents the submit action to perform.
hello i want to know how to submit form using a tag i know it is
but when i try javascript validation on form eg
<form method="post" onsubmit="valid() name="myform" action="index.php">
then the valid function doesn't work so is there any way to make the function work.
I want only a tag to be used as onsubmit.
i used simple alert function for checking the validation but it doesnot worked but when i checked it using input type submit tag then it started working.
Your onclick() function is looking for a form with the ID myform. In your example code, your form doesn't have an ID or name.
This code should work:
So long as you include the ID in the form element:
<form method="post" onsubmit="valid()" name="myform" id="myform">
Historically, form submission via submit() JavaScript method does not invoke submit event handler (most likely to prevent infinite recursion).
If you want to call a code that is contained inside onsubmit attribute, you should call it explicitly before submitting form programmatically. For example:
var form = document.querySelector('form'),
link = document.querySelector('a');
link.onclick = function() {
alert('Handler attached with JS.');
form.onsubmit.call(form);
form.submit();
return false;
};
The answer is simple - submit() method does not trigger onsubmit event. If you want to validate your code on submit then you have to call valid() function by yourself.
Example:
which will trigger your onsubmit (so it will call valid())
or just:
submit() method can be then called from that function after positive validation or whenever you want.
I know that the question is really old. But if someone actually needs a solution
i.e. in case when one wants required fields to be validated by the browser.
Inside of the form create an
<input type="submit" name="submit" />
And the click on the link should actually trigger the click on that submit input:
I've created a page in which I use a JavaScript validator on the input fields (using a script from javascript-coder.com), but I can't use my to submit the form, because it's conflicting with a function the validation script is using. My current submit button:
Submit
When i use a standard HTML submit button, the script works fine. Is there any other way or function to submit the form without conflicting with the validation script? I'm not confident enough in JS to begin taking the validation script apart.
Please help, and please ask if you need any additional info.
Thanks,
If that is your actual code, you are using the this keyword incorrectly. When called from an inline function, this refers to the element is is being called from, i.e. the anchor tag. (See here for more details: http://www.quirksmode.org/js/this.html.) As far as I am aware, you need to submit the form from the form tag.
What you should be using is something like one of these:
document.getElementById('myForm').submit();
document.forms[0].submit();
document.getElementsByClassName('submit')[0].submit(); /* not IE8 compatible */
Alternatively, if you cannot rely on your element having an ID tag, being in a known order on the page and you require IE compatibility, you could continue searching "up" the DOM until you find the form that the button sits in, then submit that:
var parentelem = this.parentNode;
while (parentelem.nodeName.toLowerCase() != 'form') {
parentelem = parentelem.parentNode;
if (parentelem == null) { break; }
}
if (parentelem != null) {
parentelem.submit()
}
Try this
Submit
The validation script uses the onsubmit event of the form to trigger the validations. When you submit the form programatically, the event does to get fired. This should work:
Submit
where yourform is the ID of your form. See this page for details:
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
Is there any way we can intercept the html form's onsubmit event?
In my web application, there are several screens containing forms etc. The issue we are facing is when the user presses any button multiple times, the server gets overloaded with same requests.
Some of the forms have event handlers already attached to them(like onSubmit, button.onClick etc).
One way can be to "inject" my button disable code by going through all the screens.
But what I am looking for is a generic solution which can be applied to all the screens by just including the script where the function is written.
I know I can setup callback using jQuery (capturing onSubmit for form), but in the issue in this case is if any screen has a onSubmit registered already, it may not get called.
Any help in this regard appreciated!
I think this piece of code is a good place to start. It should be placed in separate file and included where you want to use it (if you appear to have global list of scripts - its a good place for it)
var suppressed_items = [];
function allowOnlyOne(item,e){
if (jQuery.inArray(item, suppressed_items)==-1){
//hi little item, I haven't saw you before, please go on... but I remember you
suppressed_items.push(item);
return true;
}
else{
//Hey, you have been submitted already, stay where you are!
return false; //or e.preventDefault(), it's a matter of faith :)
}
}
jQuery(document).ready(function(){
//don't worry, it won't replace your `ready` handlers, but just append new handler
jQuery("from").submit(function(e){
return allowOnlyOne(jQuery(this),e);
});
});
You can use the allowOnlyOne function with any item you wish. So, for example to allow single click on all hyperlinks, inside that ready handler add:
jQuery("a").click(e){
return allowOnlyOne(jQuery(this),e);
}
I hope you get the basic idea: catch the event, get the ID of the element that trigger it, fed it to AllowOnlyOne along with event.
Of course you can wrap it all around into self-executing closure to achieve incapsulation and so on...
If you already have jQuery I suggest you use it... All you need to do is make sure is that your form's onsubmit do not have a "return false" or else it can block jQuery's on submit.
Here's what you need to do:
Remove any return false from your form's onsubmit (if any). Don't worry we'll take care of this later in jQuery.
Add a class to your forms... something like "disableOnSubmit". Example:
<form action="something" onsubmit="yourExistingCode" class="disableOnClick">
</form>
OR
<form action="something" onsubmit="yourExistingCode" class="someOtherClass disableOnClick">
</form>
Implement a code similar to:
<script type="text/javascript">
$(document).ready(function(){
$('form.disableOnClick').submit(function(e){
// preventDefault() does the same as "return false;". It
// will not submit the form. If you're not using return false
// and want the form to be submitted remove the line below
e.preventDefault();
// Now diable any submit button
$('input[type=submit], button[type=submit]').attr('disabled, 'disabled');
});
});
</script>