"Submit is not a function" error in JavaScript - javascript

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 ()

Related

Firing a form submit when completion is clicked on places autocomplete [duplicate]

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>

Submit comment form inside an async/await/then Javascript block in WordPress [duplicate]

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 ()

Find out which html form was submitted

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.

Can't get jQuery form submit to work

For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>

Lost form validation when changed button type

I have a form which validates that an option is selected using a returned boolean from a function:
<form id="checkoutForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" name="paypal">
And I was submitting the form with this standard image button:
<input name="submit" type="image" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" value="Checkout">
However I've been updating and am using a CSS button instead so submit the form as so:
Checkout with PayPal
I can just use the standard button like so:
<input name="submit" type="submit" class="shopbutton" value="Checkout">
But this causes me some other small issues and I'd like to know how to ensure the form validates using the other method?
TIA
Edit: I should also mention that when using the <a href type button that the button is declared outside of the <form> tags.
You are bypassing the onsubmit when directly submitting the form with javascript. This is one example why client-sided validation is bad.
One solution to your problem would be to append your a link like this:
Checkout with PayPal
And then just add some error count to the validation function, and submit within the function if no errors were found, like so:
function validateForm() {
var errors = 0;
if(inputFieldHere.value.length<3) errors++;
if(errors) return false; //Or display some error or something
else document.forms["checkoutForm"].submit();
}
Try this:
<!DOCTYPE html>
<html>
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
function submit_form()
{
if(checkme() == true)
{
document.forms["form"].submit();
}
}
</script>
</head>
<body>
<form name="form" id="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="btnSubmit" value="Submit" class="submit">
</form>
Submit form
</body>
</html>
I suggest keeping <input> button inside the form as hidden (e.g. with style="display:none;").
This way you may keep <a> to submit form with onclick, and keep validation in place (I wouldn't be surprised if validation code looks for some reason for <input type="submit" /> inside a form)

Categories

Resources