Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Please with Javascript

    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>
    Last edited by VIPStephan; 10-11-2012 at 10:19 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You never CALL the (VERY badly misnamed) function validateForm!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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");
        } 
    };
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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"
    Last edited by Philip M; 10-11-2012 at 07:55 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •