Member Avatar for kings

hi,
i am new to java script but my code is not working...please do tell the error in my code

<script language="javascript">
function validateform() {
valid=true;
for (var i=0; i < document.userdetails.elements.length; i++) {
var element = document.userdetails.elements;
switch (element.name){
case "cname":
if (element.value.length==0) valid=false;
break;
case "address":
if (element.value.length==0) valid=false;
break;


}


}
if (valid) {
respons = confirm("Do you want to proceed?");
if (respons) return true;
else return false;
} else {
alert ("Please fill in all required fields marked with *");
return false;
}
return false;
}
</script>
<script language="javascript" src="utils.js"></script>
</head>
<body>


<form method="post" action="care1.php" onSubmit="return validateform();">
<table>


<tr>
<td>Company Name </td>
<td><input type="text" name="cname" size="53"></td>
<td><span style="color:red;">*</span></td>
</tr>
<tr><td>Address </td>
<td><TEXTAREA NAME="caddr" COLS=40 ROWS=3></TEXTAREA></td>


<td><span style="color:red;">*</span></td>
</tr>
<td><input type="submit" name="Submit" value="Submit"></td>


</tr>
</table>
</form>
Edited by happygeek because: fixed formatting
  • 5 Contributors
  • 4 Replies
  • 101 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for ~s.o.s~

What do you mean by 'not working'? We have no idea what you are trying to exactly achieve here? Are you testing this application in Firefox? If no, then you should start using it. If yes, then look at the error console.

From what I can see, you are accessing the elements of a form named 'userdetails' but I don't see that name given to your form element. Other than that, you need to provide us more details.

Next time post the code with code tags as mentioned in the announcements and site rules.

Member Avatar for nav33n

Alright. You need to check these 2 things.

1. The form has no name. name = "userdetails" is missing.
2. Textarea name is caddr, but you are checking for address.

Other than that, I dont see anything wrong. This should work.

Cheers,
Naveen

Member Avatar for adorosh

You have three bugs man:
1. Fill name of form, set

<form name="userdetails" method="post" ... >

2. Where you verify whether the fields are empty, change 2nd "case" statement to "caddr":

case "caddr":
			if (element.value.length==0) valid=false;
		break;

3. In the beginning of function, where you define the valid variable set key word "var":

var valid = true;

This bug is actual for IE users only.

Good luck.

Member Avatar for hielo

Rather than checking each of the required input elements within the switch, you can simply provide a css class to each of the required elements. EX:

<input type="text" name="first" class="required" value=""/>

Then, your script will check each of the form elements for the existence if this "required" class and if so, then you check if it was actually filled.

Here is your modified code in it's entirety. Pay attention how I specified the required fields in the form elements rather than on the script.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script language="javascript">
function validateform() {
    valid=true;
    var f = document.getElementById('userdetails');
    for (var i=0; i < f.elements.length; i++)
    {
        var element = f.elements[i];
        if( /\brequired\b/i.test( element.className ) && !String(element.value).length )
            valid=false;
    }
    if (valid) 
    {
        respons = confirm("Do you want to proceed?");
        if (respons) 
            return true;
        else 
            return false;
    } 
    else 
    {
        alert ("Please fill in all required fields marked with *");
        return false;
    }
return false;
} 
</script>
<script language="javascript" src="utils.js"></script>
</head>
<body>

<form id="userdetails" method="post" action="care1.php" onSubmit="return validateform();"> 
<table>

<tr> 
<td>Company Name </td> 
<td><input type="text" class="required" name="cname" size="53"></td>
<td><span style="color:red;">*</span></td>
</tr>
<tr><td>Address </td> 
<td><TEXTAREA NAME="caddr" COLS="40" ROWS="3" class="required" ></TEXTAREA></td>

<td><span style="color:red;">*</span></td>
</tr>
<td><input type="submit" name="Submit" value="Submit"></td>

</tr>
</table>
</form> 

</body>
</html>

You are welcome!

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.