Below are my codes for form:
<form accept-charset="utf-8" action="https:example.com" method="get" name="test">
<div class="classy"><input type="button" class="buttonE buttonC" value="CLICK NOW"/></div>
</form>
I have the script below to call the button to submit, it's failed, but if I remove the div class, it can run successfully.
<script>
$('.buttonE').click(function(e){
$(this).parent().trigger('submit')
})
</script>
Could you help to provide me with the proper script to call the button which sitting in div class? Thanks in advance!
This is the most simple solution I can think of.
To simply remove the click handler for the button and set it as the type="submit" for the form.
<form accept-charset="utf-8" action="https:example.com" method="get" name="test">
<div class="classy">
<input type="submit" class="buttonE buttonC" value="CLICK NOW"/>
</div>
</form>
If you really want to use the code like you have it, then you need to use parent twice, because parent of .buttonE is <div class="classy">
<script>
$('.buttonE').click(function(e){
$(this).parent().parent().trigger('submit');
});
</script>
you can set a class for form like this:
$('.buttonE').click(function(e){
$(".form-app").trigger('submit')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form accept-charset="utf-8" action="https:example.com" method="get" name="test" class="form-app">
<div class="classy">
<input type="button" class="buttonE buttonC" value="CLICK NOW"/> </div>
</form>
notice: If you have already imported the JQuery library, you do not need this code line here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()
Assume I have many html forms in a website. I need to find out which html form was submitted.
$("form").submit(function(event){ }
Using the function above, can i find out which form was submitted?
You should assign an identifiable attribute to the form and use event.target to access that attribute.
In this case, I've assigned name to each form and printed the name on the console when the form is submitted.
$("form").submit(function(event) {
event.preventDefault();
console.log(event.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1">
<button type="submit">submit</button>
</form>
<form name="form2">
<button type="submit">submit</button>
</form>
<form name="form3">
<button type="submit">submit</button>
</form>
Even though it is recommended to use ID, you can do without it. your event.target provides the reference for the form.
$("form").on("submit", function(event){
event.preventDefault();
var a = $(event.target).children("input[type='text']").val();
console.log(a);
});
JSFiddle
Thanks #31piy for reminding about it.
Have a look into link below to identify submission of different forms.
$(document).ready(function() {
$("#Form1").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#Form2").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#other").click(function() {
$("#Form1").submit();
});
$("#other2").click(function() {
$("#Form2").submit();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Form1" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other">
Click to trigger the handler for first form
</div>
</form>
<form id="Form2" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other2">
Click to trigger the handler for second form
</div>
</form>
</body>
</html>
Good question.
I usually submit every form to a different route handler. This way I manage to keep some basic principles (Single responsibility principle). Otherwise, you risk your code becoming too complicated to read.
If you insist on having the same route and then differentiate in the backend, I believe the other answers will give you answer your question.
I am attempting to create an order form. I want it so that when you select the button to print out your order to also have it reset all the selected buttons. For the sake of simplicity I have given an extremely simplified version of my actual order form:
Html:
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();"
</form>
Javascript:
function reset(){
document.getElementById("myForm").reset();
}
My Problem is that when I click the button to reset the page, the checkboxes stay selected.
If you want to just reset the for then use RESET button as bellow
<form id="myForm">
//YOUR FORM ELEMENT EITHER CHECKBOX OR OTHERS
<input type="reset" value='RESET'/>
</form>
Now there is no need to write any script code, type='reset' will automatic handle reset of all element inside your form tag.
There is an unbalanced tag in your html, also input type='reset' can be used to reset the form
function reset() {
document.getElementById("myForm").reset();
}
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset()" value="button reset">
<!--Adding new input type -->
<input type="reset" value="reset"> </form>
</form>
Problem is your HTML, the last input button is not closed properly
Here is working JSfiddle
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();">
</form>
Javascript code
function reset(){
document.getElementById("myForm").reset();
}
I have the following form:
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<input type="submit" name="submit" class="btn" value="Add car" />
</form>
then to fetch the field use:
if($_POST['submit'])
{
$name_car= $_POST['name_car'];
....
}
So far so good. Now do the same with a button. Something of this kind (in the code below) and that the process to fetch the data is equal.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<button class="btn" type="submit" name="wizard-submit"></button>
</form>
The condition you are testing for to see if the form has been submitted is no longer true.
Original HTML:
name="submit"
New HTML:
name="wizard-submit"
The test in PHP:
if($_POST['submit'])
Additionally, your button has no value attribute, you'll need to add one (since otherwise $_POST['submit'] still isn't true)
You should also add some content to the button so that people know what it does.
<button class="btn" type="submit" name="submit" value="something">Submit</button>
If you want to use a button instead of input type submit replace $_POST["submit"] with your button name $_POST["wizard-submit"].
Then if you want your form be single page, change the form file extension to php and include your form process code in it.
NOTICE: use isset instead of vanilla if condition:
if ($_POST["submit"])
replace with:
if (isset($_POST["submit"]))
You can do that. Just put the path to the form in 'action' field.
did you try with the
if (isset ($_POST['submit']))
now the if condition only will be true if there are data, if it's null will be false.
The page with the form has to be saved as a PHP- document with the following code:
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="new_car" id="new_car" />
<input type="submit" name="submit" class="btn" value="new_car" />
</form>
if($_POST['submit']){
$var=$_POST['submit'];
}
Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()