Getting an Udefined value for a function in JS

Getting an Udefined value for a function in JS - javascript

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>

Related

redirect to another html page with script tag

i am trying to redirect to another html page using
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
but it is not working. this is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
window.confirm('Login was successful')
{
window.location.href="logintest.html";
};
return false;
}
if (!valid) {
window.confirm('Login failed')
{
window.location.href="test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action = "{{ request.path }}" method = "POST" >
<div class="p1">
<p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" id="submit" onclick="validate()" >Submit</button>
</div>
</form>
</body>
</html>
this is the function, maybe i need to have some validation here but i don't know:
#app.route('/test', methods=['GET', 'POST'])
def test():
return render_template("test.html")

There are some bracket issue in your code.
Try this:
if (valid) {
window.alert('Login was successful');
window.location.href="logintest.html";
}
else
{
window.alert('Login failed');
window.location.href="test.html";
}
return false;

Here is the complete solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
</head>
<body>
<form id='form'>
<div class="p1"><p> Saudi Electronic University</p> </div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username" >
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button type='submit'>Submit</button>
</div>
</form>
<script>
function validate(event) {
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911"];
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
return true;
}
}
return false;
}
const form = document.getElementById('form');
form.addEventListener('submit', event => {
event.preventDefault();
if( validate() ) {
window.location.href = 'https://www.google.com';
} else {
alert('Bad credentials');
}
});
</script>
</body>
</html>

Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instructor Login Form</title>
<script>
function validate() {
console.log("Validate clicked")
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
var valid = false;
var unArray = ["admin", "David", "Paul"];
var pwArray = ["123456789", "111", "911", "admin"];
if (unArray.includes(un) && pwArray.includes(pw)) {
valid = true;
}
console.log(valid)
if (valid) {
if (window.confirm('Login was successful')) {
window.location.href = "logintest.html";
};
return false;
} else {
if (window.confirm('Login failed')) {
window.location.href = "test.html";
};
return false;
}
}
</script>
</head>
<body>
<form action="javascript:void(0)" method="POST">
<div class="p1">
<p> Saudi Electronic University</p>
</div>
<div class="container1">
<h1>Instructor Login </h1>
<input type="text" placeholder="Enter Username" name="username" id="username">
<br>
<input type="password" placeholder="Enter Password" name="password" id="password">
<br>
<button class="button" onclick="validate();">Submit</button>
</div>
</form>
</body>
</html>
You have to test if
window.confirm('Login failed')
was confiremd.

JSP page's form not validating data with my Javascript

Issue
The problem is, that my JSP sends the form to my Servlet, without validating it with Javascript.
Javascript
function testInputText() {
var x, text;
x = document.getElementById("inputText").value;
if (typeof x != "string") {
text = "Invalid input JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else if(x ==""){
text = "No input found JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else {text = "Valid JS";
document.getElementById("scriptError").innerHTML = text;
return true;
}
}
formular.jsp
<!DOCTYPE html>
<html>
<head>
<script src="Javascripts/mailValidation.js"></script>
<title>Formular</title>
</head>
<body>
<form name="formular" onsubmit="return testInputText()" method="post"
action="/formSend" >
<fieldset>
<legend class="legendPersonal">Personal Information</legend>
<br>
<p class="formDescription"> fname: </p>
<p class="falseInput"> ${fnameF}</p>
<p id="sriptError"></p>
<input type="text" id="inputText" name="fname" value=${fname} >
<br>
<input type="submit" value="Send" >
</form>
</body>
</html>
My file formular.jsp is in a resource directory called "web". My javascript file in a subdirectory called "Javascripts" under "web" as well.

Denis you are trying to access scriptErrorwhereas you have not added the id into JSP page named with scripts.i think it was by mistake add as sriptError.
Updated JSP code :
<!DOCTYPE html>
<html>
<head>
<script src="Javascripts/mailValidation.js"></script>
<title>Formular</title>
</head>
<body>
<form name="formular" onsubmit="return testInputText()" method="post"
action="/formSend" >
<fieldset>
<legend class="legendPersonal">Personal Information</legend>
<br>
<p class="formDescription"> fname: </p>
<p class="falseInput"> ${fnameF}</p>
<p id="scriptError"></p>
<input type="text" id="inputText" name="fname" value=${fname} >
<br>
<input type="submit" value="Send" >
</form>
</body>
</html>
JS :
function testInputText() {
var x, text;
x = document.getElementById("inputText").value;
if (typeof x != "string") {
text = "Invalid input JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else if(x ==""){
text = "No input found JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else {text = "Valid JS";
document.getElementById("scriptError").innerHTML = text;
return true;
}
}
Good luck and let me know for any other help.

Trying to post data with form, and check input field if empty

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>

Unable to Submit the Form using submit() in a javascript method

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)"/>

Something is going wrong with this onclick

<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>

there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>

if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit

Try returning false when validation fails

Develop Reference

JavaScript is the programming language of the Web.

Getting an Udefined value for a function in JS - javascript

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>

Related

redirect to another html page with script tag

JSP page's form not validating data with my Javascript

Trying to post data with form, and check input field if empty

Unable to Submit the Form using submit() in a javascript method

Something is going wrong with this onclick

Categories

Resources