Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

radio button choice populates selection box 1

Status
Not open for further replies.

bipink

Programmer
Apr 15, 2004
14
US
Hi everyone,

Can someone please suggest me how to solve this problem:

I need to have a form which has 4 radio buttons and based on the choice of button selected I need to populate a selection box (in the same page, next to the buttons) from different tables in the database.
So, basically everything is on the same page.

How do I do this ?
Thanks,

Bipin

 
I suggest that you load the four possibilities into 4 arrays so you don't need to call the server as the user selects one or the other...
Code:
<%
set rs = cn.execute("SELECT fieldName FROM myTable WHERE someField = 'someVal'")
opt1 = ""
do while not rs.eof
  opt1 = opt1 & ",'" & rs(0) & "'"
  rs.movenext
loop

'peel off the first comma
if opt1 <> "" then opt1 = right(opt1, len(opt1)-1)

'use similar code for opt2, opt3 and opt4
%>

<script>
arr1 = new Array(<%=opt1%>)
arr2 = new Array(<%=opt2%>)
arr3 = new Array(<%=opt3%>)
arr4 = new Array(<%=opt4%>)

function loadSelect(){
  //see which radio is selected.
  theButtons = document.myForm.myRadio
  for (x=0; x<theButtons.length; x++){
    if (theButtons[x].checked){
      selection = x + 1
    }
  }
  //clear the select
  theSelect = document.myForm.mySelect
  theSelect.options.length = 0
  //populate the select
  for (x=0; x<eval("arr" + selection + ".length"); x++){
    theVal = eval("arr" + selection + "[" + x + "]")
    theSelect.options[x] = new Option(theVal, theVal)
  }
}
</script>
<form name="myForm">
<select name="mySelect"></select>
<input type=radio name="myRadio">
<input type=radio name="myRadio">
<input type=radio name="myRadio">
<input type=radio name="myRadio">

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Hi mwolf00,

Thank you for the help.
Can you please elaborate a bit on the code.
Also, can you tell me the loadSelect function gets called on the onclick even of the radio button, right ?
Another ques, isn't what we are doing here in the code, loading all the query records into the different arrays when the page opens?
Thanks,

Sincerely,
Bipin
 
Hmmm - not sure what you want me to elaborate on. Anything in specific?

Yes - I should have added an onClick event...
<input type=radio name="myRadio" onClick="loadSelect()">

Yes - we are loading all of the possibilities into differrent arrays when the page is originally called. This prevents server calls as the user decides which radio button is applicable...


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Hi mwolf00,

Please tell me this, its related.
Is it that whenever we do server calls (even just for populating the list box), the page reloads ?
Also, how do I submit a form by clicking on a radio button and/or a selection box. I don't want to press any submit button.
Thanks a lot,

Sincerely,
Bipin
 
Yes, the page reloads each time.

to submit a form using a radio button
<input type=radio name="someName" onClick="this.form.submit()">


a select to submit is more tricky - you can use the same "this.form.submit()" but I don't think you'd want it onChange - maybe onSelect?

<select name="otherName" onSelect="this.form.submit()">



Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Hi mwolf00 ,

Can you please tell me why this doesn't work ? It gives an error.

Code:
<html>
<body>
<form action="test.html" method="post">
<input type="radio" name="bipin" onclick="this.form.submit()">radio1<br>

<input type="radio" name="bipin" >radio2<br>
<input type="submit" value="Submit" name=submit>
</form>

</BODY>
</HTML>

Thanks,

Bipin
 
I usually do it this way...

<form action="test.html" method="post" name="myForm">
<input type="radio" name="bipin" onclick="document.myForm.submit()">radio1<br>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Hi mwolf00,

It worked fine. Actually I had named the submit button "submit" also, so it wasn't working.

I have another question, what design should I use if I want the user to select one of the 4 radio buttons and then choose a drop-down box. And based on those selection, a query is generated and listbox is populated.

So, should the listbox be in the same page, diff. page, frame, etc.

Do suggest.
Thanks,

Bipin
 
I think that you will need to call the server with those selections and write a second page with the new droplist.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top