SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Vermont, United States
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Drop down list to text field

    does anyone know if it is possiable to have the selection in a drop down list determine what will be displayed in the text field. I have a table with two drop down lists and then depending what is selected in the last drop down i want the text field to display a price for that item. but i want it to do it through an external javascript file. ive put both my HTML code and my javascript code in the post. I am very new to javascript but im sure that i am only missing something minor to figure this out. any help would be appreciated.

    This is my HTML

    HTML Code:
    <!doctype html public "-//w3c//dtd html 3.2//en">
    <html>
    <head>
    <title>Build/Price a Bike</title>
    <script language="javascript" src="list.js"></script>
    </head>
    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillFrameCompany();fillHeadsetCompany();">
    <FORM name="drop_list" action="">
      <table border="1" bgcolor="#00CCFF">
        <tr>
          <th>Category</th>
          <th>Company</th>
          <th>Part</th>
          <th>Price</th>
        </tr>
        <tr>
        <td>Frame</td>
        <td>
        <select name="FCompany" onChange="SelectFrame();">
        <option value="Select Frame Company">Select Frame Company</option>
        </select>
        </td>
        <td>
        <select id="Frame" name="SubCat" onChange="FramePrice();">
        <option value="Select Frame Company First">Select Frame Company First</option>
        </select>
        </td>
        <td>
        <div name="FramePrice" style="display;">
        <input type=text value="" title="Price">
        </div>
        </td>
        </tr>
        <tr>
        <td>Headset</td>
        <td>
        <select name="HCompany" onChange="SelectHeadset();">
        <option value="Select Headset Company">Select Headset Company</option>
        </select>
        </td>
        <td>
        <select id="Headset" name="SubCat">
        <option value="Select Headset Company First">Select Headset Company First</option>
        </select>
        </td>
        </tr>
        </table>
       </FORM>
       </body>
       </html>

    This is my javascript

    Code:
    function fillFrameCompany(){ 
    //this function is used to fill the category list on load
    addOption(document.drop_list.FCompany, "Specialized", "Specialized", "");
    addOption(document.drop_list.FCompany, "Sinister", "Sinister", "");
    addOption(document.drop_list.FCompany, "Giant", "Giant", "");
    addOption(document.drop_list.FCompany, "Santa Cruz", "Santa Cruz", "");
    addOption(document.drop_list.FCompany, "Cannondale", "Cannondale", "");
    addOption(document.drop_list.FCompany, "Kona", "Kona", "");
    addOption(document.drop_list.FCompany, "NS", "NS", "");
    addOption(document.drop_list.FCompany, "Rockey Mountain", "Rockey Mountain", "");
    addOption(document.drop_list.FCompany, "Trek", "Trek", "");
    addOption(document.drop_list.FCompany, "Haro", "Haro", "");
    }
    
    function SelectFrame(){
    //ON selection of category this function will work
    
    removeAllOptions(document.drop_list.Frame);
    addOption(document.drop_list.Frame, "Select Frame", "Select Frame", "Select Frame");
    
    if(document.drop_list.FCompany.value == 'Specialized'){
    addOption(document.drop_list.Frame,"Demo 8", "Demo 8");
    addOption(document.drop_list.Frame,"Demo 8 Frame", "Demo 8 Frame");
    addOption(document.drop_list.Frame,"Demo 7", "Demo 7");
    }
    if(document.drop_list.FCompany.value == 'Sinister'){
    addOption(document.drop_list.Frame,"R9", "R9");
    addOption(document.drop_list.Frame,"Mustang", "Mustang");
    addOption(document.drop_list.Frame,"Ridge", "Ridge", "");
    addOption(document.drop_list.Frame,"Gruitr", "Gruitr", "");
    addOption(document.drop_list.Frame,"DNA", "DNA", "");
    
    }
    if(document.drop_list.FCompany.value == 'Giant'){
    addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");
    addOption(document.drop_list.Frame,"Anthem", "Anthem", "");
    addOption(document.drop_list.Frame,"Glory DH", "Glory DH", "");
    addOption(document.drop_list.Frame,"Trance Advanced", "Trance Advanced", "");
    addOption(document.drop_list.Frame,"Trance", "Trance", "");
    addOption(document.drop_list.Frame,"Trance X", "Trance X", "");
    addOption(document.drop_list.Frame,"Reign X", "Reign X", "");
    addOption(document.drop_list.Frame,"Reign", "Reign", "");
    addOption(document.drop_list.Frame,"Glory", "Glory", "");
    addOption(document.drop_list.Frame,"STP", "STP", "");
    addOption(document.drop_list.Frame,"XTC Alliance", "XTC Alliance", "");
    addOption(document.drop_list.Frame,"XTC", "XTC", "");
    addOption(document.drop_list.Frame,"Youkon FX", "Youkon FX", "");
    addOption(document.drop_list.Frame,"Youkon", "Youkon", "");
    addOption(document.drop_list.Frame,"Rincon", "Rincon", "");
    addOption(document.drop_list.Frame,"Boulder SE", "Boulder SE", "");
    addOption(document.drop_list.Frame,"Boulder", "Boulder", "");
    }
    }
    
    function FramePrice(){
    var f;
    var p;
    f = document.forms["drop_list"].elements["SubCat"].value;
    p = document.getElementById('FramePrice');
    if (f == 'Glory'){
    p.firstChild.data='$1000';
    p.innerHTML='<b>$1000</b>';
    p.firstChild.data='Glory not selected';
    p.innerHTML='<b>Glory not selected</b>';
    }
    }
    
    function fillHeadsetCompany(){
    addOption(document.drop_list.HCompany, "Cane Creek", "Cane Creek", "");
    }
    function SelectHeadset(){
    removeAllOptions(document.drop_list.Headset);
    addOption(document.drop_list.Headset, "Headset", "Select Headset", "");
    if(document.drop_list.HCompany.value == 'Cane Creek'){
    addOption(document.drop_list.Headset,"1", "1");
    addOption(document.drop_list.Headset,"2", "2");
    addOption(document.drop_list.Headset,"3", "3");
    }
    }
    
    
    
    ////////////////// 
    
    function removeAllOptions(selectbox)
    {
    	var i;
    	for(i=selectbox.options.length-1;i>=0;i--)
    	{
    		// selectbox.options.remove(i);
    		selectbox.remove(i);
    	}
    }
    
    
    function addOption(selectbox, value, text )
    {
    	var optn = document.createElement("OPTION");
    	optn.text = text;
    	optn.value = value;
    
    	selectbox.options.add(optn);
    }

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Vermont, United States
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    I have made a little change to wha i am trying to do to see if i could get more help instead of trying to get drop down list to text area all i need is to get a drop down to a table cell. So if the user selects the item then it will put the price in the table cell of the item selected. and i would like it to change without refreshing the screen so if the user decides to select a different item then the price will change in the cell with the different item.


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
  •