SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    Brisbane, Australia
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Automatically Populating Another Field From A Dropdown

    Hi All

    I have built myself an invoicing system and I am in the midst of upgrading it.

    Currently I have a dropdown box with all the items we sell in it and next to that a unit price text field.

    Currently you select the item and them manually type in the price. The issue is you have to know the price.

    What I want to do is once you choose an item it automatically adds the unit price.

    I am sure this is easy and have a funny feeling I have done this years ago.

    If anyone can point me in the right direction that would be great. An example or download code would be even better.

    Many Thanks

    mrmbarnes

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrmbarnes View Post

    What I want to do is once you choose an item it automatically adds the unit price.
    I don't see where it will get the prce from to add automatically.

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    Brisbane, Australia
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey


    From memory you can add several bits of information to the dropdown box and the JavaScript will recognise each part.

    Example:

    <option value="Website Hosting::10">Website Hosting</option>

    The JavaScript looks for :: and separates it and then automatically propagates the next field with 10.

    I am sure I have done something like this years ago but can't remember where or how.

    Any help would be great.

    Thanks

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that case all you need to do is use DOM methods to get the value of each option, then use split() to get the part of the value after your nominated separator and use DOM methods again to write the appropriate value from the output of spilt() to another element.

  5. #5
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    Brisbane, Australia
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey

    I am not that great with JavaScript; do you know of some example code anywhere?

    Thanks

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    let be your friend

    If you google get select list value you will get plenty of examples on how to get the value of the selected option.

    And the link I posted before shows you how to use split() to get just that part of the option value you want.

  7. #7
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script below will fill in your text box for you after selecting a product. The <option> value holds the unit price of the product selected.

    If you want to store more than one thing in relation to the product selected, use an array holding all of the required info. The <option> value in this case could be the index number of the array.

    <html>

    <head>

    <title>Unit Price</title>
    <script type="text/javascript">
    <!--
    function getSelected(selectObj)
    { // check if invalid selection
    if(selectObj.selectedIndex==0){ return; }
    // ------------
    // valid selection, so continue to write to text box
    document.form1.unitPrice.value=selectObj.options[selectObj.selectedIndex].value;
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #seL1 { position:absolute; top:100px; left:100px; text-align:left; }
    #seL1 p { margin-top:0px; margin-bottom:3px; }

    #txtBox1 { position:absolute; top:100px; left:220px; text-align:left; }
    #txtBox1 p { margin-top:0px; margin-bottom:3px; }
    .a14B { font-size:14px; font-weight:bold; }
    .cnt { text-align:center; }
    -->
    </style>
    </head>

    <body>

    <form name="form1" action>
    <div id="seL1">
    <p class="a14B">Product</p>
    <p><select size="1" onchange="getSelected(this)">
    <option value="0" selected>Select here</option>
    <option value="2.40">Product 1</option>
    <option value="10.65">Product 2</option>
    <option value="8.22">Product 3</option>
    <option value="3.98">Product 4</option>
    </select></div>
    <!-- end seL1 -->
    <div id="txtBox1">
    <p class="a14B">Unit Price</p>
    <p><input class="cnt" type="text" name="unitPrice" value size="5">
    </div>
    <!-- end txtBox -->
    </form>
    <!-- end form1 -->

    </body>

    </html>


Bookmarks

Posting Permissions

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