I want to have a form on the main section of my webpage with buttons along the bottom of this section to submit it.
I also want to have a side bar with links to other pages, but make it so that whenever a link is clicked it acts as a button to submit the form too. (ie in the HTML, the code for these links will be outside of the form tags, but I would like them to still act as buttons for the form)
Is this possible?
You can solve this very easy without JavaScript in HTML5:
<input type="submit" form="id_of_the_form" value="Submit">
<form id="id_of_the_form" action method></form>
And you can style those buttons as you like. As in the example, the button can be placed at any point within the dom - no need to put it into the form.
Use the following onclick handler in your link, replacing formId with the ID for the form you want to submit...
onclick="document.getElementById('formId').submit();return false;"
Update
As #Juan (and others, especially #JoeTaylor) have mentioned, the above will not fire any client-side validation code associated with the form. The easiest way that I'm aware of to make it do so is to fire the click event of a submit button within the form. For instance, this could be used on your link...
onclick="document.getElementById('formSubmitButton').click();return false;"
Although you don't mention anything to do with server-side processing, I will take the assumption that is the point of your form. One additional thing I would say on the back of this is that you should ALWAYS replicate the validation back on the server. JavaScript is very easy to bypass, and so you should make sure the values reaching your server are correct, and never assume the JavaScript has done it's job.
The easiest way to ensure your form is submitted and validated by whatever function you've attached is not to call the form's submit() method, but to call its submit button's click() method instead.
Consider the following form:
<form id="bar" method="post" action="/echo/html/">
<input type="text" id="foo" name="foo">
<input type="submit" value="Submit">
</form>
Right now, clicking submit doesn't do anything special. But what if you wanted to ensure the text input had a value before sending anything off to the server? You might accomplish that as follows:
function validateBarForm() {
var txt = this.querySelector("input[type=text]");
if (txt.value == "") {
txt.style.outline = "solid red 2px";
return false;
}
}
document.getElementById("bar").onsubmit = validateBarForm;
Now if you click submit the form won't be submitted with a blank text input. But what if you submit the form programmatically? Let's add a link first...
submit form
Note that this link is outside of the form tag. We can trivially attach a submission function:
function submitBarForm() {
document.getElementById("bar").submit();
}
document.getElementById("submit-bar").onclick = submitBarForm;
We click "submit form" and... Whoops! The validation function is not performed! There are a few ways to skirt this issue, but my favourite is to simply have JavaScript simulate a click to the submit button. I find this holds up to changes a lot better than hardcoding a call to the validation function.
function submitBarForm() {
document.querySelector("#bar input[type=submit]").click();
}
Now when you click the link, the form is validated, and if everything checks out it's submitted too. But don't take my word for it--head on over to jsfiddle.net and see for yourself.
By adding an onclick javascript function to your form.
document.forms["myform"].submit();
Where "myform" is the id of your form. Here's a nice walkthrough: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
For example, the button might be:
<button onclick="document.forms['myform'].submit();">Hi</button>
Yes the button's click event add document.getElementById('formId').submit();
<form name="myform" action="action.php">
// Your form
</form>
Submit form
Or you can use jQuery:
<form name="myform" action="action.php">
// Your form
</form>
Your text
I do this myself with hidden submit buttons in the actual form, and outside of the form - anywhere else on the page - labels that reference the submit button and fire it.
In the form:
<input type='submit' id='hiddenSubmit'>
And anywhere else:
<label for='hiddenSubmit'>click me!</label>
Seems to do the job.
Related
I've been told you need to add a "return false;" to the end of a method that submits the form.
I've tried the following code, and it appears though I omit the "return false" the form gets submitted only once, not twice. Does anyone know the standard browser behavior that dictates whether the javascript form submission overrides the html form submission or are they considered one action?
<form name="myform" action="">
<button type='submit' onclick='submitForm();'>Submit</button>
</form>
<script>
function submitForm(){
console.log('Button Clicked');
document.myform.submit();
}
</script>
if I change the button to be an input type, I also get only one submission not two, from my tests, but I want to confirm this is the standard behavior.
i.e.:
<input type='submit' onclick='submitForm();'/>
As stated in the comments of the answer you linked, the fact is that submit will only submit the data in the form you handled, while the onclick attribute will trigger your method call, which triggers inside it another submit.
I think it acts as follow (feel free to correct me if I am wrong):
You click on your button.
Clicking triggered the onclick value, which will call your submitForm() method.
Your method prints 'Button Clicked' in the console.
Your document is sent a first time.
Form is submitted a second time through its submit type.
That would explain why you see your console.log a single time. You would have to trace the result in your server-side in order to check if the document has been submitted once or twice.
(And if it is once, this answer is utterly wrong.)
HTML in question is pretty simple:
<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>
js:
$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
getsWeather(document.getElementById('locSearch').value, 'f');
});
When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.
Any ideas? Let me know if you need more of the code to understand it
If you want to modify the page, you need to prevent the form from being submitted when you click the button. Two ways to do that:
Add return false to the end of your click handler for the button. This will prevent form submission (if JavaScript is enabled on the client).
Add type="button" to the button so it's not a submit button anymore.
Ideally, you'd combine #1 with handling a form submission if the client doesn't have JavaScript enabled, to handle the small number of people who surf with JavaScript disabled via the form submission while handling JavaScript-enabled clients with the in-page update.
This may be too short and sweet, but this is all I have to ask. When I have two buttons in HTML, I use one button for form submission, and another to trigger a javascript event. However, what is happening is that both buttons perform form submits. I want to use the other button for submits without making it unusable by javascript. WHat are the possible methods I can do this?
To expand on what Saravanan Sachi and aladin8848 already said:
If you are using <input> for your buttons, type="submit" will always submit your form and type="button" will be a plain, non-form submitting button.
If though you are using <button></button> tags for your buttons (as I tend to do), they have a 'default' type of submit, so you have to explicitly set their type to button ex. <button type="button">Do JS click things</button> to prevent it from submitting your form.
Use
<input type="submit">
to submit the form and
<input type="button">
to call JavaScript method
Use
<input type='button' onclick='....'>
instead of what you are probably using
<input type='submit'>
you can do the next:
var buttonList = document.getElelmentsByTagName('button');
buttonList[2].addEventListener('click', function(event){
event.preventDefault();
this.removeEventListener("click", this, false);
//do something, like add your own event
});
you should be more specific getting the buttons, and i don't test the code, but the idea is that, remove events and default behaviour of the second button.
i hope this helps you.
I'm really confused. I want to make a sort of a hotkey that changes the value of a hidden input field and submits the form. How can I do that? I've read numerous blogs and tutorials but all assume that I just want to submit the filled form after pressing enter. While I just don't understand how the very "structure" of a form acts in javascript.
Should I fill the hidden input like this:
document.getElementById('foo').value='bar'
I don't think there's even a way to see if its value was changed so I'm not sure.
And then, how do I submit the form, if I have:
<form name='myform' method='post' action='url.html'>
I tried document.myform.submit() and document.myform.form.submit(), and I've also tried giving the form an id and using document.getElementById('myformid').submit() but none of these work! I usually get the error TypeError: 'undefined' is not an object.
I'm new to javascript, I'm used to working with python but it has a completely different philosophy, and maybe that's the source of my confusion. I'd very appreciate some explanation, not just a code snippet.
Thanks!
You can always check the hidden field with the Development Tools of your Browser - just press F12 and you will see it. Go to the DOM list (within the Development Tool) and then you see the actual value of that field.
To submit a form via JavaScript normally document.name.submit() is enough. Another option is that you use e.g. jQuery to submit a form via AJAX (with the help of jQuery.serialize)
If you want to use document.getElementById('myformid').submit() you have to give an ID to your form like that :
<form name='myform' id="myform" method='post' action='url.html'>
It's the same thing about your hidden field.
document.getElementById('foo').value='bar' assume you have an hidden like that :
<input type="hidden" name="foo" id="foo" />
You can try the following approach
<form name='myform' method='post' action='url.html'>
// your fields here
// then use a input type button to have a button and define an on click event
</form>
<script type = "text/javscript">
use the event in your script
//change your hidden field value here and
// submit the form by
myform.submit();
</script>
You can use ajax or jquery as there is a function named on key up it means after pressing a key on the last field which ever you choose as you leave the key on keyboard it will submit the forms.
check this okay http://www.w3schools.com/php/php_ajax_livesearch.asp
I'm making a web page using CGI scripting which has a form users need to fill out. The general layout is:
<form>
textfield (username)
textfield (password)
textfield (email)
submit button
</form>
What I would like to do is add a button that checks to see if the username they've entered is available. My problem is the way I'm trying to go about doing this is by writing:
<form>
<form>
textfield (username)
submit button
</form>
textfield (password)
textfield (email)
submit button
</form>
This doesn't work, the submit button instead submits the outer form. Here are the things I've considered trying but have not worked:
Put a form at the end of the first form. Problem: I have no idea how to align the "validate" button next to the username text field button without making it float which causes a bunch of other issues with the page.
Put values on the submit buttons and make the submit do different things based on which button was clicked. Problem: the web page that I want to make a "POST" request to is different based off which button is pressed. Seeing as I put the action="mypage.cgi" in the portion of the code, and not the button portion, I don't know how to make it go to different sites based on which button I press.
First of all it is a good idea to give all forms names.
So you can easily distinguish between forms.
Next, attach onClick even to each button that would call a function with a different paramenter: 1,2,3. Each button would send its own parameter. In the function you just look at the paramenter and submit appropraite form.
<form name='form1'>
....
<button type="button" onClick=doIt(1);>Submit</button>
</form>
<form name='form2'>
....
<button type="button" onClick=doIt(2);>Submit</button>
</form>
<form name='form3'>
....
<button type="button" onClick=doIt(3);>Submit</button>
</form>
<script>
function doIt(formid)
{
if(formid==1)
{
document.form1.submit();
}
if(formid==2)
{
document.form2.submit();
}
...
}
</script>
Have multiple submit buttons with different names. Check for each on the post back.
The approach that I have used for nested forms is to use tag instead of tag,
and then appending the form tags at the time of clicking submit buttons.
I have written a small JQ Plugin-'dynaForm' for the same, and its very easy to implement.
Please refer to ==> http://anupampdhyy.wordpress.com/2014/09/29/dynaform/
and
you can also watch a demo for same at :
https://www.youtube.com/watch?v=CFQia8EsoPQ&feature=youtu.be
I hope this helps you to implement nested forms in your HTML code. :)
You probably need to make two different form actions, so that you don't submit two completly different values.