Help Please with Javascript

AggressiveCoder · 10-11-2012, 02:59 AM

I need help with this code. I have written it and the only part that works is the calculation of cost for the fruits. The other part where requires to validate the values does not work i.e if i put the values beyond 99 in textboxes, it is suppose to say..the values are suppose to be between 0-99, but it does not do that. Any help would be appreciated.

Thanks

Code:

<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org//TR/xhmtl/DTD/xhtml-strict.dtd ">
<html xmlns = "http:www.w3.org/1999/xhtml">
<head>
<title> nochange.html </title>
<script type = "text/javascript" src = "nochange.js" ></script>
<script>
function validateForm(){
  document.getElementById("Apple").onblur=function(){
  if(this.value==""){alert("Please Enter values");return}
  if(parseInt(this.value)<0 || parseInt(this.value)>99 ){alert("values should be betwween 0-99 ");}   
};

  document.getElementById("Orange").onblur=function(){
    if(this.value==""){alert("Please enter values");return}
     if(parseInt(this.value)<0 || parseInt(this.value)>99 ){alert("values should be between 0-99");}     
};

  document.getElementById("Banana").onblur=function(){
  if(this.value==""){alert("Please enter values");return}
   if(parseInt(this.value)<0 || parseInt(this.value)>99 ){alert("values should be between 0-99");}   
};

document.getElementById("btnTotalCost").onclick = function(){
        if( document.getElementById("Apple").value==""
            document.getElementById("Orange").value==""
            document.getElementById("Banana").value==""
        ){
            alert("Enter all the values properly");
        }    
    };               
}

</script>
</head>
<body>
<form action = "">
<h3> Fruits Shop </h3>
<table border = "border">
<tr>
<th> Product Name </th>
<th> Price </th>
<th> Quantity </th>
</tr>
<tr>
<th> Apple </th>
<td> $0.59 </td>
<td> <input type="text" id="Apple" size = "2" /> </td>
</tr>
<tr>
<th> Orange </th>
<td> $0.49 </td>
<td> <input type="text" id="Orange" size = "2" /> </td> 
</tr>
<tr>
<th> Banana </th>
<td> $0.39 </td>
<td> <input type="text" id="Banana" size = "2" /></td>
</tr>
</table>
<p>
<input type="button" id = "btnTotalCost" value = "Total Cost" onclick="computeCost();" />
<input type="text" size="5" id ="cost" onfocus="this.blur();" />
</p>
<p>
<input type = "Submit"  value = "Submit" />
<input type = "reset" value = "Clear" />
</p>

<script>
function computeCost() {
var apple = document.getElementById("Apple").value;
var orange = document.getElementById("Orange").value;
var banana = document.getElementById("Banana").value;
var totalCost = (apple * 0.59 + orange * 0.49 + banana * 0.39)*1.05;
document.getElementById("cost").value =totalCost;
}
</script>
</form>
</body>
</html>

Old Pedant · 10-11-2012, 03:12 AM

You never CALL the (VERY badly misnamed) function validateForm!

Old Pedant · 10-11-2012, 03:13 AM

And this code is total hash:

Code:

document.getElementById("btnTotalCost").onclick = function(){
    if( document.getElementById("Apple").value==""
    document.getElementById("Orange").value==""
    document.getElementById("Banana").value==""
    ){
        alert("Enter all the values properly");
    } 
};

Philip M · 10-11-2012, 07:49 AM

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

if(this.value==""){
What if the user enters a space or a letter or a ?

<input type = "Submit" value = "Submit" />
This does nothing but as you are not actually submitting a form to a server you should use <input type = "button"