|
 |
asp_databases thread: Dynamic text fields based on selection
Message #1 by "Chirag Shah" <chiragiit@y...> on Thu, 21 Nov 2002 14:32:12
|
|
I am having three radio buttions in my HTML Form
a) Mail b) Fax c) Email
Based on which one user select it displays appropriate text box below it.
say for eg. If user select Fax radio button than there will be a text
field for fax number will appear below in the form, but if user select
mail than there will be a scrolling text box appear below in the form.
Any idea how this can be done? Using javascript or ASP?
Message #2 by Mark Eckeard <meckeard2000@y...> on Thu, 21 Nov 2002 07:02:00 -0800 (PST)
|
|
Use javascript and CSS.
Wrap DIV tags around the 3 text boxes and set their
visibility to hidden. This will hide them when the
page loads.
When the user clicks on one of the radio buttons, call
a javascript function that determines which selection
they made and change the respective hidden text box to
visible.
HTH,
Mark
--- Chirag Shah <chiragiit@y...> wrote:
>
> I am having three radio buttions in my HTML Form
> a) Mail b) Fax c) Email
>
> Based on which one user select it displays
> appropriate text box below it.
> say for eg. If user select Fax radio button than
> there will be a text
> field for fax number will appear below in the form,
> but if user select
> mail than there will be a scrolling text box appear
> below in the form.
> Any idea how this can be done? Using javascript or
> ASP?
>
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus ? Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
Message #3 by "Drew, Ron" <RDrew@B...> on Thu, 21 Nov 2002 17:14:36 -0500
|
|
Here is an example of how you can use Javascript with radio buttons.
You can also when clicked update, display or whatever dynamically versus
how is should below. Cool stuff...just cut and paste...it should work
for you out of the box.
<html><head>
<SCRIPT LANGUAGE=3D"JavaScript">
<!-- Begin
var menu_selection=3D"";
var radio_selection=3D"";
function checkForm() {
if (dropDownMenu() && radioButtons()) {
document.forms[0].results1.value=3Dmenu_selection;
document.forms[0].results2.value=3Dradio_selection;
alert("\nForm has been filled out correctly.");
}
}
function dropDownMenu(form) {
var myindex=3Ddocument.forms[0].menu.selectedIndex;
if (myindex=3D=3D0) {
alert("\nYou must make a selection from the drop-down menu.");
document.forms[0].menu.focus();
}
else {
menu_selection=3Ddocument.forms[0].menu.options[myindex].value;
return true;
}
}
function radioButtons() {
if (radio_selection=3D=3D"")
alert("\nYou must check one of the radio buttons.");
else {
return true;
}
}
function resetForm() {
document.forms[0].menu.options[0].selected =3D true;
menu_selection=3D"";
radio_selection=3D"";
}
function about() {
alert("\nVALIDATOR checks to see that a selection has been made from
the drop-down menu and that a radio button has been checked.\n\nIf
filled out properly, the data will be displayed below.");
}
// End -->
</SCRIPT>
<BODY>
<CENTER>
<FORM>
<TABLE BORDER=3D4 WIDTH=3D500>
<TR>
<TD align=3D"center"><FONT SIZE=3D+1><B>MENU</B></FONT>
<TD align=3D"center"><FONT SIZE=3D+1><B>RADIOS</B></FONT>
</TR>
<TR>
<TD align=3D"center"><SELECT NAME=3D"menu" SIZE=3D1>
<OPTION SELECTED VALUE=3D""> --- How many times have you been to
DisneyLand? ---
<OPTION VALUE=3D"one">Once
<OPTION VALUE=3D"two">Twice
<OPTION VALUE=3D"three">Three times
<OPTION VALUE=3D"four">Four times
<OPTION VALUE=3D"five">Five times
<OPTION VALUE=3D"six">Six times
<OPTION VALUE=3D"seven">Seven times
<OPTION VALUE=3D"eight">Eight times
<OPTION VALUE=3D"nine">Nine times
<OPTION VALUE=3D"ten">Ten+ times
</SELECT>
<TD align=3D"center"><BR>Will you be back to DisneyLand?<br>
<INPUT TYPE=3D"radio" NAME=3D"radiobutton"
onClick=3D"radio_selection=3D'yes'">YES
<INPUT TYPE=3D"radio" NAME=3D"radiobutton"
onClick=3D"radio_selection=3D'no'">NO
<INPUT TYPE=3D"radio" NAME=3D"radiobutton"
onClick=3D"radio_selection=3D'maybe'">MAYBE
</TR>
</TABLE>
<BR>
<TABLE BORDER=3D0 WIDTH=3D400>
<TD align=3D"center"><INPUT TYPE=3D"reset" VALUE=3D"Reset"
onClick=3D"resetForm()">
<TD align=3D"center"><INPUT TYPE=3D"button" VALUE=3D"Check Form Fields"
onClick=3D"checkForm()">
<TD align=3D"center"><INPUT TYPE=3D"button" VALUE=3D"About"
onClick=3D"about()">
</TABLE>
<BR>
<TABLE BORDER=3D4 WIDTH=3D250>
<TR>
<TD align=3D"center">MENU:
<TD align=3D"center">RADIO:
</TR>
<TR>
<TD align=3D"center"><INPUT TYPE=3D"text" NAME=3D"results1" SIZE=3D7>
<TD align=3D"center"><INPUT TYPE=3D"text" NAME=3D"results2" SIZE=3D7>
</TR>
</TABLE>
<BR>
</FORM>
</CENTER>
</body></html>
-----Original Message-----
From: Chirag Shah [mailto:chiragiit@y...]
Sent: Thursday, November 21, 2002 9:32 AM
To: ASP Databases
Subject: [asp_databases] Dynamic text fields based on selection
I am having three radio buttions in my HTML Form
a) Mail b) Fax c) Email
Based on which one user select it displays appropriate text box below
it. say for eg. If user select Fax radio button than there will be a
text
field for fax number will appear below in the form, but if user select
mail than there will be a scrolling text box appear below in the form.
Any idea how this can be done? Using javascript or ASP?
|
|
|
View Cart
