Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 34,104
Total Threads: 106,160
Total Posts: 592,468
There are 4 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Need some assistance with a dynamic dropdown in a form

Thread title: Need some assistance with a dynamic dropdown in a form
Reply    
    Thread tools Search this thread Display Modes  
05-25-2011, 02:37 PM
#1
chaka42 is offline 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

Send a message via AIM to chaka42 Send a message via MSN to chaka42 Send a message via Skype™ to chaka42

  Old  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.

05-26-2011, 01:33 PM
#2
flc is offline flc
Status: Junior Member
Join date: Mar 2011
Location: Usa
Expertise: Programming,Seo,web Desiging
Software: adobe dreamweaver,webceo,
 
Posts: 67
iTrader: 0 / 0%
 

flc is on a distinguished road

  Old

the argument to function "setOptions(chosen)".. Where from is it getting values? Maybe i missed it.. anyways do not use .length property to add and option i.e (selbox.options[selbox.options.length] = new Option('10 Mbps','225')
instead use (selbox.options[selbox.options] = new Option('10 Mbps','225')

06-19-2011, 10:45 PM
#3
Wildhoney is offline Wildhoney
Wildhoney's Avatar
Status: Request a custom title
Join date: Feb 2006
Location: Nottingham
Expertise:
Software:
 
Posts: 1,648
iTrader: 18 / 95%
 

Wildhoney is on a distinguished road

Send a message via AIM to Wildhoney Send a message via MSN to Wildhoney Send a message via Yahoo to Wildhoney

  Old

Sorry, can you explain this a little better please? I'm not quite understanding

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed