I have a strange behaviour in my form, it sends the data from the textboxes but it doesn't send the button data.
This is my form:
<form name="login_registro" method="POST" id="login_registro">
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password">
<input type="submit" name="hacer_login" style="width:auto; height:auto; padding:5px;" class="button" onclick="submitForm('{{matches|last}}/entrar')" value="entrar">
<input type="submit" name="registro" style="width:auto; height:auto; padding:5px;" class="button" onclick="submitForm('{{matches|last}}/registro')" value="regístrate gratis!" >
</form>
The submit function:
<script type="text/javascript">
function submitForm(action) {
document.getElementById('login_registro').action = action;
document.getElementById('login_registro').submit();
}
</script>
In the two pages (entrar and registro) I did a print_R($_POST); and it only shows the two inputs, username and password. It doesn't shows the button pressed.
If I remove the onclick function, and add an action="page.php" it sends the two inputs plus the button pressed.
I know I can do a workaround, but I would like to know why this happend. Thanks.
PS: I commented all jquery.
Your problem here is that using onclick and submitting the form, will submit twice because the submit button already sends the form, and you add form.submit()
Use onsubmit="return submitForm('actionName')". If you return true at the end of the function, the form will get submitted. If you return false, the submission will be cancelled.
You can do this more elegantly by not setting the action dynamically and sending it as a field of the form, or parameter (set through the submitForm function), but this implies changes to your server-side code.
function submitForm(action) {
document.getElementById('login_registro').action = action;
}
I didn't understand at all your answer #Vicentiu Bacioiu, but you gave me a cue. How you said the form is submitted twice, so removing the line where it submit the form in the function worked for me.
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I'm using HTML5 for validating fields. I'm submitting the form using JavaScript on a button click. But the HTML5 validation doesn't work. It works only when then input type is submit. Can we do anything other than using JavaScript validation or changing the type to submit?
This is the HTML code:
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
I'm submitting the form in the function submitform().
The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.
However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity() method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I’m afraid you would need to check all the constrained fields, since the validityMessage property is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.checkValidity()) {
f.submit();
} else {
alert(document.getElementById('example').validationMessage);
}
}
You should use form tag enclosing your inputs. And input type submit.
This works.
<form id="testform">
<input type="text" id="example" name="example" required>
<button type="submit" onclick="submitform()" id="save">Save</button>
</form>
Since HTML5 Validation works only with submit button you have to keep it there.
You can avoid the form submission though when valid by preventing the default action by writing event handler for form.
document.getElementById('testform').onsubmit= function(e){
e.preventDefault();
}
This will give your validation when invalid and will not submit form when valid.
I may be late, but the way I did it was to create a hidden submit input, and calling it's click handler upon submit. Something like (using jquery for simplicity):
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">
<script>
function submitform() {
$('#submit_handle').click();
}
</script>
I wanted to add a new way of doing this that I just recently ran into. Even though form validation doesn't run when you submit the form using the submit() method, there's nothing stopping you from clicking a submit button programmatically. Even if it's hidden.
Having a form:
<form>
<input type="text" name="title" required />
<button style="display: none;" type="submit" id="submit-button">Not Shown</button>
<button type="button" onclick="doFancyStuff()">Submit</button>
</form>
This will trigger form validation:
function doFancyStuff() {
$("#submit-button").click();
}
Or without jQuery
function doFancyStuff() {
document.getElementById("submit-button").click();
}
In my case, I do a bunch of validation and calculations when the fake submit button is pressed, if my manual validation fails, then I know I can programmatically click the hidden submit button and display form validation.
Here's a VERY simple jsfiddle showing the concept:
https://jsfiddle.net/45vxjz87/1/
Either you can change the button type to submit
<button type="submit" onclick="submitform()" id="save">Save</button>
Or you can hide the submit button, keep another button with type="button" and have click event for that button
<form>
<button style="display: none;" type="submit" >Hidden button</button>
<button type="button" onclick="submitForm()">Submit</button>
</form>
Try with <button type="submit"> you can perform the functionality of submitform() by doing <form ....... onsubmit="submitform()">
2019 update: Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement.reportValidity() which not only checks validity like checkValidity() but also reports validation errors to the user.
The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
Updated solution snippet:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.reportValidity()) {
f.submit();
}
}
HTML5 Validation Work Only When button type will be submit
change --
<button type="button" onclick="submitform()" id="save">Save</button>
To --
<button type="submit" onclick="submitform()" id="save">Save</button>
Try this out:
<script type="text/javascript">
function test
{
alert("hello world"); //write your logic here like ajax
}
</script>
<form action="javascript:test();" >
firstName : <input type="text" name="firstName" id="firstName" required/><br/>
lastName : <input type="text" name="lastName" id="lastName" required/><br/>
email : <input type="email" name="email" id="email"/><br/>
<input type="submit" value="Get It!" name="submit" id="submit"/>
</form>
I have two forms on my page, one for username and password and one for a special verification pin. On my FIRST form I have the action set to return false, otherwise the page will refresh and will stop my hidden div from showing up with the second form which is a hidden div. I have a sign in button, which unhides the hidden div on click, and a submit button, which a user presses after their pin is entered. The problem I am having is that I want the final submit button to submit both forms. Is this possible?
This is what my sign in page looks like and when it is submitted it shows the hidden div which has another form that the user enters their pin. I would like the final submit button to process all 3 inputs.
This is the form that I have for the username and password, it is returning false so that it doesn't refresh the page
<form action="" method="POST" id="hello" onsubmit="return false;">
and the button that actually sign's in is here
<input class="btn_green_white_innerfade btn_medium" type="submit"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName"> username</label><br>
<input class="textField" type="text" name="username"
id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left;
display: none;">It seems that you may be having trouble entering your
password. We will now show your password in plain text (login is still
secure).</div>
This is my second form
<form name="search-form" //this is the form that submits the final pin
id="search-form"
action="#"
class="form-search"
method="POST"
onsubmit="submitForms();">
This is the function I am using onsubmit
function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}
Loginaction.php is the script that I have and I want it to process all 3 inputs, username, password, and the special verification PIN.
My overall question is can i use the final submit button to process all 3 inputs through the script and if so how would i go about doing it?
UPDATE
I now have only one form, however with two buttons in, one submit and one that shows the hidden div, but the forms are not seeming to be submitted.
This is the current form I have - The first button I need to have it just show the hidden div, which it is doing, however the submit button which I want to have submit the username, password AND pin, does not seem to be working, what should I add to my form?
<!DOCTYPE html>
<html>
<head>
<form>
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
</form>
</head>
You are taking the wrong approach here.
You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.
You only need one form and one submit button.
Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.
Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.
Instead, when the user clicks the login button, submit an Ajax request to the server to check the credentials:
// this is the id of the form
$("#loginForm").submit(function(e) {
var url = "path/to/your/login.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//Show the hidden PIN div
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Do a similar thing with the PIN validation:
// this is the id of the form
$("#pinForm").submit(function(e) {
var url = "path/to/your/pin.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#pinForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//WRONG PIN
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Hi what you can do is get a button submit and send all the info.
Example:
- form 1 and form 2 fields have diff id so you get that ids to a var or data and send it. This way you can submit the forms you want and validate, but there can only be only 1 submit final btw.
You get all the data to var, ex:
$('#btnName').click(function() {
var form1 data = ...
var form2 data = ...
now if you set it a array, var, object, etc you can get the total data from the 2.
});
I hope this helps you
Ok so you wanna send for example 2 forms, you can just have 1 php which gonna receive.
<?php
$form1_id = $_POST['id'];
$form2_id = $_POST['id2'];
?>
Ok so you have 2 input which gonna have the name of id and id2 (separated forms)
Now you gotta go on your html and add those 2 forms:
<form id='form1' action='#'>
<input type="text" name="id" id="id"></input>
</form>
<form id='form2' action='#'>
<input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>
This was just an example i'm making on the phone.
After you have html and php or whatever you wanna do, this is just an example
you go at ur js script:
$('#yo').click(function(){
//btw just get the values now
var id_form1 = document.getElementById(etc)
var id_form2 = ...
//now check whatever and use HttpRequest
//to send it
});
I hope it has helped you beter
I'm using HTML5 for validating fields. I'm submitting the form using JavaScript on a button click. But the HTML5 validation doesn't work. It works only when then input type is submit. Can we do anything other than using JavaScript validation or changing the type to submit?
This is the HTML code:
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
I'm submitting the form in the function submitform().
The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.
However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity() method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I’m afraid you would need to check all the constrained fields, since the validityMessage property is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.checkValidity()) {
f.submit();
} else {
alert(document.getElementById('example').validationMessage);
}
}
You should use form tag enclosing your inputs. And input type submit.
This works.
<form id="testform">
<input type="text" id="example" name="example" required>
<button type="submit" onclick="submitform()" id="save">Save</button>
</form>
Since HTML5 Validation works only with submit button you have to keep it there.
You can avoid the form submission though when valid by preventing the default action by writing event handler for form.
document.getElementById('testform').onsubmit= function(e){
e.preventDefault();
}
This will give your validation when invalid and will not submit form when valid.
I may be late, but the way I did it was to create a hidden submit input, and calling it's click handler upon submit. Something like (using jquery for simplicity):
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">
<script>
function submitform() {
$('#submit_handle').click();
}
</script>
I wanted to add a new way of doing this that I just recently ran into. Even though form validation doesn't run when you submit the form using the submit() method, there's nothing stopping you from clicking a submit button programmatically. Even if it's hidden.
Having a form:
<form>
<input type="text" name="title" required />
<button style="display: none;" type="submit" id="submit-button">Not Shown</button>
<button type="button" onclick="doFancyStuff()">Submit</button>
</form>
This will trigger form validation:
function doFancyStuff() {
$("#submit-button").click();
}
Or without jQuery
function doFancyStuff() {
document.getElementById("submit-button").click();
}
In my case, I do a bunch of validation and calculations when the fake submit button is pressed, if my manual validation fails, then I know I can programmatically click the hidden submit button and display form validation.
Here's a VERY simple jsfiddle showing the concept:
https://jsfiddle.net/45vxjz87/1/
Either you can change the button type to submit
<button type="submit" onclick="submitform()" id="save">Save</button>
Or you can hide the submit button, keep another button with type="button" and have click event for that button
<form>
<button style="display: none;" type="submit" >Hidden button</button>
<button type="button" onclick="submitForm()">Submit</button>
</form>
Try with <button type="submit"> you can perform the functionality of submitform() by doing <form ....... onsubmit="submitform()">
2019 update: Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement.reportValidity() which not only checks validity like checkValidity() but also reports validation errors to the user.
The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
Updated solution snippet:
function submitform() {
var f = document.getElementsByTagName('form')[0];
if(f.reportValidity()) {
f.submit();
}
}
HTML5 Validation Work Only When button type will be submit
change --
<button type="button" onclick="submitform()" id="save">Save</button>
To --
<button type="submit" onclick="submitform()" id="save">Save</button>
Try this out:
<script type="text/javascript">
function test
{
alert("hello world"); //write your logic here like ajax
}
</script>
<form action="javascript:test();" >
firstName : <input type="text" name="firstName" id="firstName" required/><br/>
lastName : <input type="text" name="lastName" id="lastName" required/><br/>
email : <input type="email" name="email" id="email"/><br/>
<input type="submit" value="Get It!" name="submit" id="submit"/>
</form>
It works:
When the button is used
The problem is:
When pressing enter inside the text-field, the default action seems to be submit. I just want it to use the button available as default. Is this possible or will i have to highjack the enterpress with javascript?
Code:
<form>
<label>Password:<input type="password" id="pass" name="pass"></label>
<input type="button" value="hämta data" onclick="getData('password.txt')"/>
</form>
By default, pressing Enter in the last field of a form submits the form. Try this:
<form onsubmit="return false;">
so that submitting the form doesn't do anything.