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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    would you look at my script

    function hTools() {
    var hTools = new Array(6);
    hTools[0] = "hand tools";
    hTools[1] = "saw";
    hTools[2] = "hammer";
    hTools[3] = "screwdriver";
    hTools[4] = "wrench";
    hTools[5] = "pliers";
    }

    if(hTools[0] == true)
    {
    document.forms[0].item_one.value ="0";

    }
    else if(hTools[1] == true)
    {
    document.forms[0].item_one.value ="$20.00"
    }
    then I call it fro an onchage selection list



    <p><select name ="hTool" onchange ="return hTools();">
    <option value ="hTool0">Hand Tool</option>

    Item 1: <input type ="text" name ="item_one"
    My script or my call or both is not working could you please look at it and tell me what I am doing wrong

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    You're not comparing hTools to anything.
    Code:
    if(hTools[0] == true)
    Along with the rest of it is going to resolve true every time because hTools is not null, or not false. The equivalent of what you're doing is
    Code:
    foo = true;
    bar = true;
    if (foo == true){
    //do some stuff
    }else if(bar == true){
    //do some stuff
    }
    //etc
    As you can see, not very useful. So I think you have to change you function to include
    Code:
    function hTools() {
    var hTools = new Array(6);
    foo = hTools.selectedIndex.value;
    hTools[0] = "hand tools";
    hTools[1] = "saw";
    hTools[2] = "hammer";
    hTools[3] = "screwdriver";
    hTools[4] = "wrench";
    hTools[5] = "pliers";
    }
    
    if(foo == hTools[0])
    {
    document.forms[0].item_one.value ="0";
    
    }
    else if(foo == hTools[1])
    {
    document.forms[0].item_one.value ="$20.00"
    }
    Something like that anyway should work.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    It isn't very clear what exactly you are trying to do... but I'll make a guess.

    Do you want to update the value of the "item_one" input when the select menu is changed? And the value will be the price of that item?

    If so, the easiest thing for you to do is set up an object (or an array) with the item names as the keys and the prices as the values. Make sure the keys of the object match the options' values in your select menu.

    Your object would be:
    PHP Code:
    var hTools = {
        
    "hand tools":0,
        
    "saw":20,
        
    "hammer":12,
        
    "screwdriver":2.34
        
    "wrench":5,
        
    "pliers":3.61
    }; 
    So now, when you make your select menu, match up the values of each option with the keys in that object. You'll see why in a minute!
    PHP Code:
    <select onchange="document.getElementById('item_one').value = '$'+hTools[this.value];">
        <
    option value="hand tools">hand tools</option>
        <
    option value="saw">saw</option>
        <
    option value="hammer">hammer</option>
        <
    option value="screwdriver">screwdriver</option>
        <
    option value="wrench">wrench</option>
        <
    option value="pliers">pliers</option>
    </
    select>
    <
    input type="text" id="item_one" name="item_one" value="$0"
    You'll notice that I added an "id" attribute to the text input. That's so that you can quickly get that element using "document.getElementById".

    The "onchange" attribute I added to the select menu first gets "item_one" and then sets its value to the price given by the hTools object we created earlier. The reason we created the object like we did, with the keys the same as the option values, is so that we can quickly get those prices. Let's take a closer look...

    (I'm going to highlight different parts of the same code multiple times.)

    1) Okay so we already know that the highlighted part here is setting item_one's value to whatever is after the equal sign.
    document.getElementById('item_one').value = '$'+hTools[this.value];

    2) this.value is getting the value of the select menu whenever it is changed.
    document.getElementById('item_one').value = '$'+hTools[this.value];

    3) So suppose you change it to "saw"... it is essentially doing this:
    document.getElementById('item_one').value = '$'+hTools["saw"];

    And in the object, we have:
    var hTools = {
    "hand tools":0,
    "saw":20,
    "hammer":12,
    "screwdriver":2.34
    "wrench":5,
    "pliers":3.61
    };

    4) So hTools["saw"] is equal to 20.

    5) And of course the dollar sign highlighted here puts a dollar sign before the price.
    document.getElementById('item_one').value = '$'+hTools["saw"];


    Let me know if I need to further explain anything.

    Last edited by tfburges; 07-05-2011 at 05:04 AM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BulletTimeBill View Post
    You're not comparing hTools to anything.
    Code:
    if(hTools[0] == true)
    Along with the rest of it is going to resolve true every time because hTools is not null, or not false. The equivalent of what you're doing is
    Code:
    foo = true;
    bar = true;
    if (foo == true){
    //do some stuff
    }else if(bar == true){
    //do some stuff
    }
    //etc
    As you can see, not very useful. So I think you have to change you function to include
    Code:
    function hTools() {
    var hTools = new Array(6);
    foo = hTools.selectedIndex.value;
    hTools[0] = "hand tools";
    hTools[1] = "saw";
    hTools[2] = "hammer";
    hTools[3] = "screwdriver";
    hTools[4] = "wrench";
    hTools[5] = "pliers";
    }
    
    if(foo == hTools[0])
    {
    document.forms[0].item_one.value ="0";
    
    }
    else if(foo == hTools[1])
    {
    document.forms[0].item_one.value ="$20.00"
    }
    Something like that anyway should work.
    When I try this code it tells me the "foo" is undefined...am I leaving something out...

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What i am trying to do is from a selection list choose either"hand tools" at a value of "0" or any of the other items at a value of "$20"...I am very new at this and am trying to learn how to do this for a project i am working on...I thank you for all of your help so far....I don't completely understand how you are saying to do this at the moment...Kenney

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Let's go through it in a logical manner ... and you will ONLY need HTML to achieve want you want to achieve

    Your HTML
    Code:
    <select name ="hTool">
      <option value ="0">Hand Tool</option>
      <option value ="20">Saw</option>
      <option value ="20">Hammer</option>
      <option value ="20">Screwdriver</option>
      <option value ="20">Wrench</option>
      <option value ="20">Pliers</option>
    </select>
    Depending on the user selection the select will have the correct value (either 0 or 20).

    Do you really need the dollar value in item_one? Then you will have to copy it onchange
    Code:
    <select name ="hTool" onchange="copyValue()">
      <option value ="0">Hand Tool</option>
      <option value ="20">Saw</option>
      <option value ="20">Hammer</option>
      <option value ="20">Screwdriver</option>
      <option value ="20">Wrench</option>
      <option value ="20">Pliers</option>
    </select>
    
    function copyValue() {
       document.forms[0].item_one.value = "$" + document.forms[0].hTool.value.toFixed(2);
    }
    Bottom line: If you use this code, it will work without the additional "item_one" field
    Code:
    <select name ="hTool">
      <option value ="$0.00">Hand Tool</option>
      <option value ="$20.00">Saw</option>
      <option value ="$20.00">Hammer</option>
      <option value ="$20.00">Screwdriver</option>
      <option value ="$20.00">Wrench</option>
      <option value ="$20.00">Pliers</option>
    </select>

  • Users who have thanked devnull69 for this post:

    Kenney (07-05-2011)

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Did you read my post, Kenney?
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    /* <![CDATA[ */
    
    function hTools() {
    var hTools = new Array(6);
    hTools[0] = "hand tools";
    hTools[1] = "saw";
    hTools[2] = "hammer";
    hTools[3] = "screwdriver";
    hTools[4] = "wrench";
    hTools[5] = "pliers";
    }
    
    if(hTools[0] == true)
    {
    document.forms[0].item_one.value ="20";
    
    }
    else if(hTools[1] == true)
    {
    document.forms[0].item_one.value ="$20.00"
    }
    
    
    /* ]]> */
    </script>    
        
    </head>
    
      <body> 
     <div> 
    <!-- Your XHTML here -->
    <h1>Purchase Order</h1>
    <form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"
    onsubmit ="return confirmSubmit();"
    onreset ="return confirmReset();">
    <table border ="0">
    <tr>
    <td valign ="top">
    <h3>Products</h3>
    <p>Hand Tools <br />$20.00</p>
    <p><select name ="hTool" onchange ="return hTools();" /></p>
    <p>
    <option value ="hTool0">Hand Tool</option>
    <option value ="hTool1">Saw</option>
    <option value ="hTool2">Hammer</option>
    <option value ="hTool3">Screwdriver</option>
    <option value ="hTool4">Wrench</option>
    <option value ="hTool5">Pliers</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></td>
    
    <td>&nbsp;
    <p>Power Tools <br />$30.00</p>
    <p><select name ="pTools" onclick="this.value=''">
    <option value ="pTool0">Power Tool</option>
    <option value ="pTool1">Circular Saw</option>
    <option value ="pTool2">Drill</option>
    <option value ="pTool3">Sabre Saw</option>
    <option value ="pTool4">Belt Sander</option>
    <option value ="pTool5">Table Saw</option>
    </select></p></td></tr>
    <table border ="0">
    <tr>
    <td valign ="top"><br /><br />
    <p>
    <h3>Shipping Fees</h3></p>
    Item 1:  <input type ="text" name ="item_one" onclick="this.value=''"
    value ="" size ="25" />
    Item 2:  <input type ="text" name ="item_two" onclick="this.value=''"
    value ="" size ="25" />
    Shipping:  <input type ="text" name ="shipping" onclick="this.value=''"
    value ="" size ="25" />
    Total:  <input type ="text" name ="total" onclick="this.value=''"
    value ="" size ="25" />
    </table>
    this is my project...I am trying to make the handtools show "0" when selcted and then the rest of the tools says"$20"...I am supposed to use an "if" "else" statement...this is for a class project...I have enclosed my code... can someone look at it and tell me why it doesn't work ...I am not understanding why this does not work...thank you Kenney

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    My conclusion: You can not be helped

    Short excerpt about what is wrong with your code
    1. You are using an array before it is initialized
    2. You use the same array for string content and to compare its content with boolean values
    3. Your code is missing functions that you call onsubmit and onreset
    4. You neither read nor understood the previous answers


  •  

    Posting Permissions

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