Need some assistance with a dynamic dropdown in a form - Webmaster Forum

05-25-2011, 02:37 PM

chaka42

Status: Senior Member
Join date: Apr 2005
Location: Middle America
Expertise:
Software:

Posts: 955

iTrader: 5 / 100%

chaka42 is an unknown quantity at this point

Need some assistance with a dynamic dropdown in a form

I'm fairly new to javascript so I'm not quite sure how to do this, hence this thread.

I created a form that uses js for dynamic dropdowns. I originally set up the dropdowns with values that are used to calculate a total. But the client wanted to 2nd dropdown options to be determined by the selection in the 1st dropdown. I have that working but now can't figure out how to add the values for the 2nd dropdown so the calculation works properly.

I'm including the code below so you can see what I have.

HTML:

Code:

<form name="myform" id="form-access" method="post" action="internet-access-thanks.php">
    <fieldset class="calculator">
        <div class="div-lft">
            <label>Usage Plan:</label>
            <select name="f_plan">
                <option>Unlimited</option>
            </select><br />
            <label>Port Speed:</label>
            <select id="postspeed" name="f_speed" onchange="showtotal();setOptions(document.myform.f_speed.options[document.myform.f_speed.selectedIndex].value);">
                <option value="0">Choose one</option>
                <option value="504">5 Mbps</option>
                <option value="605">10 Mbps</option>
                <option value="693">20 Mbps</option>
                <option value="725">30 Mbps</option>
                <option value="756">50 Mbps</option>
                 <option value="855">100 Mbps</option>
             </select><br />
             <label>Bandwidth Usage:</label>
             <select id="bandwidth" onchange="showtotal()" name="f_bw">
                 <option value="" selected="selected">Select speed</option>
             </select>
         </div>
     </fieldset>
</form>

Javascript:

Code:

function showtotal()
    {
      //var list1 = document.getElementById("postspeed");
      //var strUser = e.options[e.selectedIndex].value;
      var postspeed = parseInt(document.getElementById("postspeed").options[document.getElementById("postspeed").selectedIndex].value);
      var bandwidth = parseInt(document.getElementById("bandwidth").options[document.getElementById("bandwidth").selectedIndex].value);
      var total = postspeed + bandwidth;
      if (total==0)
      {
      document.getElementById("totalcost").innerHTML="$000";
      return;
      }
      else 
       {
      document.getElementById("totalcost").innerHTML="$" + total;
      return;   
       }
    }

function setOptions(chosen) {
	var selbox = document.myform.f_bw;
 
	 
	selbox.options.length = 0;
	if (chosen == " ") {
	  selbox.options[selbox.options.length] = new Option('Select one',' ');
	 
	}
	if (chosen == "504") {
	  selbox.options[selbox.options.length] = new Option('5 Mbps','125');
	}
	if (chosen == "605") {
	  selbox.options[selbox.options.length] = new Option('10 Mbps','225');
	}
	if (chosen == "693") {
	  selbox.options[selbox.options.length] = new Option('20 Mbps','400');
	}
	if (chosen == "725") {
	  selbox.options[selbox.options.length] = new Option('30 Mbps','450');
	}
	if (chosen == "756") {
	  selbox.options[selbox.options.length] = new Option('50 Mbps','600');
	}
	if (chosen == "855") {
	  selbox.options[selbox.options.length] = new Option('100 Mbps','900');
	}
	}

Thanks for any assistance.

$0.06