This question already has answers here:
behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?
(5 answers)
Closed 6 years ago.
I run into the bug with my multi form page:
I have two forms:
<form>
<input type="submit" id="single-submit" name="form_1" value="Submit 1"/>
</form>
<form>
<input type="submit" id="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('#single-submit').prop("disabled", true);
});
I'm trying to get the submit name in php:
if(isset($_POST['form_1']))
{
// form 1 submitted
}
if(isset($_POST['form_2']))
{
// form 2 submitted
}
But JS is preventing this, why?
I can recieve submit name="" from second, third... form. But not from the first form on page.
UPDATE:
Removed double ids, added classes instead:
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_1" value="Submit 1"/>
</form>
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('.single-submit').prop("disabled", true);
});
Moreover now first AND second form does not return submit name.
Also tried on( instead, no luck.
So it seems something still wrong with JS.
Without this JS everything is working as expected.
Use a class instead of an id on this : id="single-submit".
An id must be unique.
Related
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'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>
This question already has answers here:
POST form and prevent response
(2 answers)
Closed 9 years ago.
I have html form whose action is a php script. php code basically replaces the file.
HTML code:
<form name="input" action="//copy.php" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
Php code:
if isset($_POST['submit']))
{
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
?>
Now when I click submit, a alert box opens that "file is updated successfully" and when I click ok on it, a blank page load. How can I avoid loading the blank page? I want to stay on the same page after clicking submit with pop up msg.
SOLUTION
As I don't see "Answer your own question" option, I am posting solution here.
This link POST form and prevent response, gives you textual answer to the question. While I providing the answer by code.
So basically, it very simpl. Just put
header("HTTP/1.0 204 No Response");
in the php file and it will work successfully on all browser, without opening new page. This will avoid use of jquery.
Leave action empty.
<form method="post" action="">
Then check if posted using isset function
if(isset($_POST)){
...
}
This will keep you on the same page after submit button..
<form name="input" action="" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
But now, your image(s) may not be loaded. Maybe it will work, maybe not. If not, you will need to resolve functions which may reside in copy.php file. Since we dont know whats in that file, its hard to answer your question correctly, but.. you may try this "blind" shot..
if(isset($_POST['submit']))
{
//include "//copy.php"; // this file probably contains functions, so lets load functions first IF needed..
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
Have you tried changing the type on the input:
<input type="submit" name="submit" value="Copy image"/>
to
<input type="button" name="submit" id="submit" value="Copy image"/>
<input type="button" /> won't submit a form by default (check all browsers to be sure).
<input type="submit"> by default, the tag in which the submit input is, is submitted. If you still want to use this, you will have to override the input submit/button's functionality with an event.preventDefault(). In that case, you need:
$('#submit').click(function (event) {
event.preventDefault();
//Do whatever you need to
//Submit if needed: document.forms[0].submit();
});
For further details refer this link
action="<?php echo $_SERVER['PHP_SELF']; ?>
I have two files. One is login.html which is a simple html5 file with a form.
HTML
<form method="post" action="" name="form1">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send" onclick="verif(document.form1.code)">
</p>
</form>
Second is my javascript file with the below code:
function verif(inputtxt) {
var pwd = "123456";
if (inputtxt.value.match(pwd)) {
window.location.href = 'Test.html';
} else {
alert('Code erron\351 ! ')
return false;
}
}
Now my problem is that when I enter my password, if it is wrong the alert message indicating an error should appear (it appears and I don't have a problem with that) and if it is correct, I should get redirected to the next page. The second part doesn't work for me.
Please help, I'm stuck with that for two days now..
Since your button is a submit button, I think it is submitting the form after the JS is done and this could be the reason why you don't get redirected to Test.html (as form action attribute doesn't have any value.) Try the below code for the HTML form and check if this solves the issue.
<form method="post" action="" name="form1" onsubmit="verif(document.form1.code);return false;">entre the pasword:
<input type="password" name="code" placeholder="code" maxlength="6">
<p class="submit">
<input type="submit" name="commit" value="send">
</p>
</form>
The return false; in the onsubmit attribute prevents the form's default submit action. The verif(document.form1.code) will be executed whenever the form is submitted (that is the submit button is clicked).
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need