I am getting a SyntaxError: missing ; before statement. I have no idea why I'm getting this error since my code is EXACTLY the same as in the textbook I'm using. Please help. I will post code, and comment where syntax error is:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Practive</title>
<meta charset="utf-8">
<style>
input{display: block;
padding-bottom: 10px;
width: 250px;
text-align: left;}
label {float:left;}
</style>
<script type="text/javascript">
<!--
fuction validateForm() // SyntaxError: missing ; before statement
// before v
{
if (document.forms[0].userAge.value < 18){
alert ("Age is less than 18!");
return false;
} // end if
alert ("Age is valid.");
return true;
} // end function validateForm
// -->
</script>
</head>
<body>
<h1> JavaScript Form Handling </h1>
<form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();">
<label for="userName">Name: </label>
<input type="text" name="userName" id="userName">
<label for="userAge">Age:   </label>
<input type="text" name="userAge" id="userAge">
<input type="submit" value="send information" id="submit">
</form>
</body>
</html>
Note this:
fuction validateForm()
should be:
function validateForm()
You forgot the N in word function and fixing that is solution to your problem. :)
write function instead of fuction in your script like this
function validateForm()
{
if (document.forms[0].userAge.value < 18) {
alert("Age is less than 18!");
return false;
}
alert("Age is valid.");
return true;
}
You did mistake in calling function
Replace
fuction validateForm()
With
function validateForm()
You did spelling mistake in calling function.
Related
I'm trying to make some code that sends a form that first makes sure if it is filled correctly. When I click on the "enviar formulario" button, it doesn't call the javascript code and does not do anything.
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length() < 2){
alert("Error");
return 1;
}
else if(!document.getElementById("edad").value.isInteger()){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
There is nothing like document.getElementById("nombre").length()
If you are trying to read the length of input text do this
document.getElementById("nombre").value.length
EDIT 1:
There is no method as isInteger(). So use parseInt() instead
This will be your working code
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length < 2){
alert("Error");
return 1;
}
else if(!parseInt(document.getElementById("edad").value)){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
You're comparing the length of the whole input tag rather than the text in it.
if (document.getElementById("nombre").value.length < 2)
{
...
}
if (!document.getElementById("edad").value.isInteger())
{
...
}
and so on...
First, please check if your control is reaching the test method, use a debugger (I prefer chrome)
After that check your syntax in the console, while the code is at the breakpoint
You can share your findings here
I am trying to make a registration form which has a textbox for confirming your password.
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password");
var confPass = document.getElementsByName("passwordconf");
function passVal() {
if (pass.value != confPass.value) {
confPass.setCustomValidity("Passwords don't match");
} else {
confPass.setCustomValidity("");
}
}
</script>
The intent is that whenever a key is released (onkeyup), a function runs which checks to see if the contents of the textboxes are equal (passVal). When I run it add text to both of the password boxes, errors show up in the console saying that passVal is not defined.
I tried making passval equal to a variable
var variableExample = passVal;
and using onkeyup to call the variable, but this made no difference. Except, that now the console said variableExample was not defined instead of passVal. I have no clue why this is not working. Anyone know how I might fix this?
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password")[0];
var confPass = document.getElementsByName("passwordconf")[0];
function passVal() {
if (pass.value != confPass.value) {
console.log('Not equal');
} else {
console.log('Equal');
}
}
</script>
If you query by .getElementsByName(), you'll get an array of elements, as does .getElementsByTagName(). Notice that "Element" is plural.
If you only want one element, just use .getElementsById().
getElementsByName return an array of elements,
You should use id instead or get the fist element of array (pass[0])
The first thing you need to fix here is how you are getting the element value which is by using
var pass = document.getElementsByName("passwordconf")
which returns an array of all the elements with the name passwordconf.
Adding .value to variable pass will then return undefined because you did not define which element in the array are you trying to get. You can add [0] to get the first element in the array (array indexing always starts count with 0) like this:
pass[0].value;
Note that by doing this, you will not get the passVal is not defined error.
Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
What is wrong with my JavaScript? I want to show a errormessage next to the validate-field, but it doesnt show anything.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jsformular.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="formBody">
<form name="myform" onsubmit="return validate()" method="post">
<div class="formField">
<div class="formFieldElement">
<label for="firstname">Firstname:*</label>
</div>
<div class="formFieldElement">
<input type="text" name="firstname">
</div>
<div class="formFieldElement formError" id="errorFirstname"></div>
</div>
</form>
</body>
</html>
you lost } in validate function
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
it's work
You were missing the close bracket at the end of your function.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
When I typed nothing in the field and hit the enter key, it showed the error message.
For finding issues like this in future, I would highly recommend using the developer console included with Chrome or Firefox. It immediately flagged the error for me with the following error message:
Uncaught SyntaxError: Unexpected end of input
defined the script in the head of my html file but still doesn't function is it because the action for my form leads to a php file?
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["food_name"].value;
if (x==null || x=="")
{
alert("Food name must be filled out");
return false;
}
</script>
<title> my title is going here </title>
</head>
<body>
<form name="myForm" action="http://xxxxxxxxx/~xxxxxxxx/file/phpfile.php" method="post" onsubmit="validateForm()">
<b>foodName:</b> <input type="text" name="food_name"><br>
<b>Food Type:</b> <input type="text" name="food_type"><br>
<b>Total:</b> <input type="text" name="total"><br>
<b>Available:</b> <input type="text" name="available"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Fix the missing curly braces } for the validateForm function and update onsubmit to this
onsubmit="return validateForm()"
other wise it will submit the form even if validation is failed
check http://jsfiddle.net/Thu69/
you have missing brace in your validateForm function