Unable to Submit the Form using submit method in the javascript method & onclick event
on the button element even tried using the onsubmit event in the form tag.
Need the reason for not submitting the details.You can copy the code & run it for more
clarity on it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">`enter code here`
function validateForm(form) {
if (validateNames(form['hallticket'], form['hallticket_help']) && validateNames(form['firstname'], form['firstname_help'])) {
form.submit();// Form is not getting submit
}
else {
alert("Please Enter the Required Fields");
}
}
function validateNonEmpty(inputField, helpText) {
return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
}
function validateRegex(regex, input, helpText, helpMessage) {
if (!regex.test(input)) {
//Data is mismatched
if (helpText != null) {
helpText.innerHTML = helpMessage;
return false;
}
}
else {
if (helpText != null)
//data is matched
helpText.innerHTML = "";
return true;
}
}
function validateHallticket(inputField, helpText) {
if (!validateNonEmpty(inputField, helpText)) {
return false;
}
else
return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
}
function validateNames(inputField, helpText) {
// see that input data is non empty
if (!validateNonEmpty(inputField, helpText)) {
return false;
}
else
return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
}
</script>
<link rel="StyleSheet" href="test1.css" type="text/css"></link>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform">
<table border="1">
<tr>
<td>
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this,document.getElementById('hallticket_help'))"></input>
<span id="hallticket_help" class="helpcss"> </span>
</td>
</tr>
<tr>
<td>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this,document.getElementById('firstname_help'))"></input>
<span id="firstname_help" class="helpcss"> </span>
</td>
<td>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this,document.getElementById('lastname_help'))"></input>
<span id="lastname_help" class="helpcss"> </span>
</td>
</tr>
</table>
<center>
<input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>
</center>
</form>
</body>
</html>
Please check your spelling of the function called in onclick, its misspelled as 'validatForm' instead of 'validateForm'
This fixes many issues
DEMO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function validateNonEmpty(inputField, helpTextId) {
var helpText = document.getElementById(helpTextId);
return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
}
function validateRegex(regex, input, helpText, helpMessage) {
if (regex.test(input)) {
if (helpText != null) {
helpText.innerHTML = "";
}
return true;
}
//Data is mismatched
if (helpText != null) {
helpText.innerHTML = helpMessage;
}
return false;
}
function validateHallticket(inputField, helpText) {
if (!validateNonEmpty(inputField, helpText)) {
return false;
}
return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
}
function validateNames(inputField, helpText) {
// see that input data is non empty
if (!validateNonEmpty(inputField, helpText)) {
return false;
}
return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
}
window.onload=function() {
document.getElementById("myform").onsubmit=function() {
if (validateNames(this['hallticket'], 'hallticket_help') &&
validateNames(this['firstname'], 'firstname_help') &&
validateNames(this['lastname'], 'lastname_help')) {
return true;
}
alert("Please Enter the Required Fields");
return false; // cancel submit
}
}
</script>
<link rel="StyleSheet" href="test1.css" type="text/css"></link>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform" id="myform">
<table border="1">
<tr>
<td>
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this,'hallticket_help')" />
<span id="hallticket_help" class="helpcss"> </span>
</td>
</tr>
<tr>
<td>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this,'firstname_help')" />
<span id="firstname_help" class="helpcss"> </span>
</td>
<td>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this,'lastname_help')" />
<span id="lastname_help" class="helpcss"> </span>
</td>
</tr>
</table>
<center>
<input type="submit" value="SUBMIT" />
</center>
</form>
</body>
</html>
Apart of the issues already found in you code there is one more.
Your button submit input tag is:
<input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>
And must be:
<input type="submit" value="SUBMIT" onclick="validateForm(this.form)"/>
Related
I'm trying to have a form where I can search a database, but also have simple error handling where I can check if the user did not enter anything and run the function validateForm. However I'm not sure how to do both.
<form action="http://apsrd7252:5000/result/" method="POST">
<input type="text" id="IDSub" name="hostname" />
<input onclick="return validateForm()" type="submit" value="Submit" placeholder="Host Name" />
</form>
Here's the script
function validateForm() {
var a = document.getElementById("IDSub");
if( a.value == null) {
alert("Please fill in an ID");
return false;
} else {
window.location.href = "http://apsrd7252:5000/result";
}
}
Instead of "null" in if condition simply use empty string like "".
function validateForm() {
var a = document.getElementById("IDSub");
if( a.value == "") {
alert("Please fill in an ID");
return false;
} else {
window.location.href = "http://apsrd7252:5000/result";
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form action="http://apsrd7252:5000/result/" method="POST">
<input type="text" id="IDSub" name="hostname" />
<input onclick="return validateForm()" type="submit" value="Submit" placeholder="Host Name" />
</form>
</body>
</html>
JavaScript Function
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
HTML FORM FIELD
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td>
<td>
<input type="text" id="userName" name="userName" onblur="validateUserName(this)">
<span id="userName_help" />
</td>
</tr>
<tr>
<td> Password : </td>
<td>
<input type="password" id="password" name="password" onblur="validatePassword(this)">
<span id="password_help" />
</td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form);">
</input>
</form>
The above is my code, which validates data and submits the form. but i keep getting
Uncaught ReferenceError: submitToServer is not defined
error, which I am unable to resolve. what could be the reason?
But, when I tried it with different form it worked with different names and fields.
EDIT
the difference between the code that worked and this is that, the former code does not use table it works smooth. Does scope change with table ?
You can find the code here CODE FIDDLE
You can get .html file here
SignIn.html
<html>
<head>
<title>Sign into Shopping Zone</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8">
<style>
body
{
font: 14px verdana;
}
h1
{
font: arial-black;
color: blue;
}
</style>
<script type="javascript" language="text/javascript">
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
function validateUserName(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("userName_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("userName_help").innerHTML = "";
return true;
}
}
function validatePassword(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("password_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("password_help").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<h1><b><i>Shopping Zone</i></b></h1>
<p> Kindly Provide Login info
</p>
<!-- SignIn Form Data for Passing to SignIntoPortal-->
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td> <td><input type="text" id="userName" name="userName" onblur="validateUserName(this)"><span id="userName_help" /></td>
</tr>
<tr>
<td> Password : </td> <td><input type="password" id="password" name="password" onblur="validatePassword(this)"><span id="password_help" /></td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form)"></input>
</form>
</body>
</html>
in the script header, your 'type' and 'language' attributes are mixed up. type should be 'text/javascript' and language should be 'javascript' although the language attribute is not required
<script type="text/javascript" language="javascript">
So I am creating an exam entry form for school and when a user enters anything wrong, the name of the field will turn red (what the user has input will remain the same) I need to be able to do this with an onclick event activated by my reset button however the function I have right now does not do this. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="return resetNames();" /></td>
</tr>
</table>
</form>
</body>
</html>
I think your closing braces may be in the wrong place... move one of the two closing braces at the end of your JavaScript to the end of the validateForm() function.
try something like this
YOUR CODE
function validateForm() {
....
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
CHANGE TO
function validateForm() {
......
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
Reason you have nested your function one inside another.
I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>
Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>
getting undefined as a return type for the method validateHallticket please check the code & modify accordingly so, that when i click the submit button i should able to get the appropriate return types.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>4Cubes Site</title>
<script type="text/javascript">
function validateForm(form) {
document.writeln(validateNames(form["firstname"]));
document.writeln(validateHallticket(form["hallticket"])); // getting undefined value
if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
form.sub`enter code here`mit();
}
else {
alert("Please Fill the required Fields");
}
}
function validateNames(inputField) {
Names_help = document.getElementById('lastname_help');
if (inputField.value.length == 0) {
if (Names_help!= null) {
Names_help.innerHTML = "Please Enter a validate Name";
return false;
}
}
else {
Names_help.innerHTML = "";
return true;
}
}
function validateHallticket(inputField) {
var regex = /^\d{2}K91A\d{4}$/;
var rs = regex.test(inputField.value);
hallticket_help = document.getElementById('hallticket_help');
if (!regex.test(inputField.value)) {
if (hallticket_help != null) {
hallticket_help.innerHTML = "Enter a valid hallticket";
return false;
}
}
else {
hallticket_help.innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform">
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this)"></input>
<span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
<br></br>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this)"></input>
<span id="firstname_help" style="color:Red; font-style:italic;"> </span>
<br></br>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this)"></input>
<span id="lastname_help" style="font-style:italic; color:Red;"> </span>
<center>
<input type="button" value="SUBMIT" onclick="validateForm(this.form);"></input>
</center>
</form>
</body>
</html>
This is because, the function loads before the DOM loads. Try moving the <script> tag just before </body> and it works.
Notes
Add return false; when invalid.
Add the handler to the onsubmit event of the <form> tag.
Full Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>4Cubes Site</title>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform" onsubmit="return false;">
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this)"></input>
<span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
<br></br>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this)"></input>
<span id="firstname_help" style="color:Red; font-style:italic;"> </span>
<br></br>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this)"></input>
<span id="lastname_help" style="font-style:italic; color:Red;"> </span>
<center>
<input type="button" value="SUBMIT" onclick="return validateForm(this.form);"></input>
</center>
</form>
<script type="text/javascript">
function validateForm(form) {
document.writeln(validateNames(form["firstname"]));
document.writeln(validateHallticket(form["hallticket"])); // getting undefined value
if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
form.submit();
}
else {
alert("Please Fill the required Fields");
}
return false;
}
function validateNames(inputField) {
Names_help = document.getElementById('lastname_help');
if (inputField.value.length == 0) {
if (Names_help!= null) {
Names_help.innerHTML = "Please Enter a validate Name";
return false;
}
}
else {
Names_help.innerHTML = "";
return true;
}
return false;
}
function validateHallticket(inputField) {
var regex = /^\d{2}K91A\d{4}$/;
var rs = regex.test(inputField.value);
hallticket_help = document.getElementById('hallticket_help');
if (!regex.test(inputField.value)) {
if (hallticket_help != null) {
hallticket_help.innerHTML = "Enter a valid hallticket";
return false;
}
}
else {
hallticket_help.innerHTML = "";
return true;
}
return false;
}
</script>
</body>
</html>
Fiddle: http://jsbin.com/apuyaw/1
Put your script tag before ending body tag because you currently dont hav the reference of the element
<body>
<script>
your code in here
</script>
</body>