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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamicaly populate form fields?

    I need a little bit of help on something I am trying to do with forms. I have created a form that uses a drop down box. I would like it so that when one of the options in the drop down box is selected it automatically populates another field.

    For example, if I had a list of automakers in a drop down list and someone selected Ford then a text field would be populated with a pre-determined value.

    Better yet, if someone selected a product from a drop down list a field would get populated with the price based on the value of the selected item.

    I have no idea how to do this. Does anyone know of a tutorial or guide for this type of form fuctioning? Thank you in advance.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you have the price stored in the value of the select box you can use selectedIndex and get the property from that box like...

    Code:
    <script type="text/javascript" language="JavaScript">
    	function setPrice(item){
    		document.car.price.value=item.options[item.selectedIndex].value
    	}
    </script>
    <form name="car">
    <select name="make" onchange="setPrice(this)">
    	<option value="">Select One</option>
    	<option value="$15.99">RC Buggy</option>
    	<option value="$33,621.00">Lexus IS 300</option>
    </select>
    <input type="text" name="price">
    </form>
    If you don't have that value available, or need it to pass the "make" then you can have an array of values that matches the pulldown name/value pairs.

    ShriekForth

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunetly, I cannot. With outgoing into detail the value of the actual item can not be the price. The value of the item must be the description of the item. Therefore, I need to be able to display the price elsewhere when someone selects an item. Is there a way to check the price field and base it off of the items description to display the proper price? You have to love politics. But in the end it probably is best practice at any rate.
    Last edited by krugar; 08-12-2002 at 09:48 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand the politics of it all too well. An associative array would work just as well..

    Code:
    <script type="text/javascript" language="JavaScript">
    var prices = new Array();
    prices["RP998"] = "$15.99";
    prices["RP554"] = "$32,321.99";
    	function setPrice(item){
    		idx =item.options[item.selectedIndex].value
    		document.car.price.value = prices[idx]
    	}
    	
    </script>
    <form name="car">
    <select name="make" onchange="setPrice(this)">
    	<option value="">Select One</option>
    	<option value="RP998">RC Buggy</option>
    	<option value="RP554">Lexus IS 300</option>
    </select>
    <input type="text" name="price">
    </form>
    ShriekForth

  • #5
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it works, where can I send the beer of the month club gift cert to? I'll try it first thing tomorrow at work.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Quick comment:

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    var x = new Array;
    alert('x = new Array');
    x['2002'] = 'thisyear';
    alert('x[\\'2002\\'] = \\'thisyear\\'');
    alert('x.length: ' + x.length);
    alert('x[2002]: ' + x[2002]);
    alert('x[\\'2002\\']: ' + x['2002']);
    x = new Object;
    alert('x = new Object');
    x['2002'] = 'thisyear';
    alert('x[\\'2002\\'] = \\'thisyear\\'');
    alert('x.length: ' + x.length);
    alert('x[2002]: ' + x[2002]);
    alert('x[\\'2002\\']: ' + x['2002']);
    </script>
    </head>
    <body>
    </body>
    </html>

    Good idea to avoid using an Array object as a hash; no telling (with JS) when type conversion will be sneaked in.


  •  

    Posting Permissions

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