This question already has answers here:
Microsoft JScript runtime error: Member not found
(2 answers)
"Submit is not a function" error in JavaScript
(19 answers)
Closed 3 years ago.
//html code for form
<form id="contactform" method="post" action="/action_page.php">
//submit button html code
<input type="button" id="submit" onclick="submit_form()" value="Submit">
//javascript submit function.
function submit_form()
{
document.getElementById("contactform").submit();
return false;
}
so here are the html and javascript snippets of my contact form, now when I am debugging my javascript code it is giving me a member not found error at the document.getElementById("contactform").submit(); line. The problem still persists even though the id of my button and the name of the function that runs are different. Can somebody please help me resolve this?
The problem was your input button had an ID of submit.
I renamed that id and you can see below a working code:
function submit_form()
{
document.getElementById("contactform").submit()
return false;
}
<form id="contactform" method="post" action="/action_page.php">
<input type="button" id="hsubmit" onclick="submit_form()" value="Submit">
</form>
Related
This question already has answers here:
HTML form action and onsubmit issues
(3 answers)
Closed 3 years ago.
i know there are other questions like mine but before you mark it as a duplicate could you please read it.
i am trying to validate my html form using javascript.
i have done this before in another web page and it worked correctly however i am trying to use the same code for my new page but it does not work.
this is the code:
function validateForm(form) {
var valid = true;
if (!form.title.value.length)
{
valid = false;
document.getElementById('titleRequired').style.display = "inline-block";
}
else
{
document.getElementById('titleRequired').style.display = "none";
}
}
<form id="form" action="register.php" method="post" onsubmit="return validateForm(this)">
<h2> create profile: </h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name">
<span class="error" id="fNameRequired">first name required</span>
<span class="error" id="capitalRequired">first letter must be capital</span>
</div>
<div>
<input type="submit" value="Submit" name="submit" >
</div>
</form>
i have more inputs for this form however i am doing it step by step and not sure where i am going wrong.
i have this exact same code on another project i worked on with more inputs and it works fine.
the output i am currently getting is: it submits the form as normal even when no text is entered.
You're not returning the result of the validation. Add return valid; before the last curly brace to return false or true so the submit handler knows what to do.
This question already has answers here:
What is the default form HTTP method?
(5 answers)
Closed 4 years ago.
I saw the below code in w3school. I was wondering is this considered a POST request or a GET request. I only changed the action location to go to a java servlet rather than php.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action">
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>
<form>'s default method is GET.
So it is considered as a GET request. You'll see all the parameters are being binded to the URL once the form is submitted.
EDIT (answering this comment):
Easiest way to change the method of the form is to mention it in method attribute in the <form> tag.
<form method='POST' id="myForm">
Or you can use javascript as below,
document.getElementById("myForm").method = "POST";
This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 4 years ago.
onsubmit does not execute in the code snippet below when you press the submit button. It should show 'Submitting' in the javascript console when you press Submit.
function submit(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit()">
<input type=submit />
</form>
It's a name collision. Name your function something other than submit, it worked for me then.
See below:
function a () {
console.log('Submitting');
}
<form action="#" onsubmit="a()">
<input type=submit />
</form>
submit() is a predefined method in javaScript which submits a form. Just rename it to another name.
function submit2(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit2()">
<input type=submit />
</form>
This question already has answers here:
Why JS function name conflicts with element ID?
(3 answers)
Closed 6 years ago.
I am trying to submit my from using js but onclick is not working when used with input type button, even alert in the function is not working....
<input type="button" value="Register" id="org_reg_submit" class="reg_input" maxlength="100" onclick="org_reg_submit()">
function org_reg_submit(){
alert("hi");
document.getElementById("org_reg").submit();
}
Change the id of the button or the name of the function and the code works since you cannot have the same name of the button and a function
<script>
function org_reg_submit(){
alert("hi");
document.getElementById("org_reg").submit();
}
</script>
<form id="org_reg" onsubmit="alert('form submitted')">
<input type="button" value="Register" id="org_reg_submit_button" class="reg_input" maxlength="100" onclick="org_reg_submit()">
</form>
For anyone who find this in the future:
ID not matching in your js function and in your HTML input code. Just
match them
Ensure the js code is loaded before the HTML one
;)
This question already has answers here:
How send a form with Javascript when input name is "submit"?
(2 answers)
Closed 7 years ago.
I have the following form. When I have the input name set to submit, it won't submit the form, why is that?
<form id="login" method="post" action="">
<input type="hidden" name="username" value="someval">
<input type="hidden" name="userpass" value="somepass">
<input type="hidden" name="submit" value="Login">
</form>
<script type="text/javascript">
var timeout = 12;
setTimeout(function () {
document.getElementById('login').submit();
}, timeout);
</script>
Error message is:
Uncaught TypeError: document.getElementById(...).submit is not a function(…)
I guess the submit name is erasing the submit function in some way?
JSFiddle with and without submit name.
edit to my question:
How can I submit the form using js when it includes input named submit?
JavaScript has a single namespace for properties and methods. Each named field becomes a property of the form object. In your case, document.getElementById('login').submit is no longer a method, but an input field.
Because you may access child elements of the form as direct properties. So in your case:
'use strict';
let form = document.getElementById('login');
console.log(form.username, form.userpass, form.submit); // 3 input elements
So when you have an element named submit, it shadows the submit() function, and thus you get the error about it not being a function.