radio button text box interaction?

liunx · Jan 9, 2008

I'm creating a form and I want an adjacent text box to be usable when a certain radio button is clicked but not when another radio button is selected. The html tutorial I read, while helpful, did not go into how this is done. What I'm trying to do looks something like this: 
 
<input type="radio" name="number of days" value="single day"> 
<input type="radio" name="number of days" value="multi day"> 
<input type="text" name="multi day" value="number of days"> 
 
Anyone know how I get the third input to activate and deactivate depending on which radio button is selected? 
 
Also is there a way I can specify what values can be entered into the text input and what values cannot? Thanks.Originally posted by Dave Clark 
<input type="radio" name="number of days" value="single day" 
onclick="this.form.elements['multi day'].value=''; 
this.form.elements['multi day'].disabled=true; 
return true;"> 
<input type="radio" name="number of days" value="multi day" 
onclick="this.form.elements['multi day'].disabled=false; 
this.form.elements['multi day'].value=''; 
return true;"> 
 
Ok?

Dave 
 
Thanks, once again, Dave. I haven't added the code yet (will tomorrow) but I'm sure it'll work.Originally posted by Dave Clark 
<input type="radio" name="number of days" value="single day" 
onclick="this.form.elements['multi day'].value=''; 
this.form.elements['multi day'].disabled=true; 
return true;"> 
<input type="radio" name="number of days" value="multi day" 
onclick="this.form.elements['multi day'].disabled=false; 
this.form.elements['multi day'].value=''; 
return true;"> 
 
Ok?

Dave 
 
for anyone else looking to use radio buttons to turn on/off a text box, the above code contains a small error. It should be written as: 
 
 
<input type="radio" name="number of days" 
value="single day" 
onclick="this.form.elements['multi day'].disabled=true; 
this.form.elements['multi day'].value=''; 
return true;"> 
<input type="radio" name="number of days" 
value="multi day" 
onclick="this.form.elements['multi day'].disabled=false; 
this.form.elements['multi day'].value=''; 
return true;">Originally posted by Dave Clark 
The only change I see is to reverse the order of two JavaScript statements. How does that constitute an error? Seems more a matter of preference. 
 
Dave 
 
I guess I shouldn't throw around the word "error" like that.

Sorry. 
 
Anyway, it wasn't a workin' a one way so I'sa did it's another way.

Originally posted by Dave Clark 
Who do you think you are? ...Dobby?

Dave 
 
Who's Dobby?

Originally posted by Dave Clark 
Dobby is an elvish creature in the Harry Potter books/movie and he talks similar to that. 
 
Dave 
 
Okay then, I have to stop doing that.

Ok Dave. Have another one for ya. Looked on internet couldn't find answer. Now I want to tie two radio buttons to three text box inputs labelled "month", "day", and "year". Here's what I have: 
 
 
<INPUT TYPE="radio" NAME="DELIVERY TIME" VALUE="IMMEDIATELY" onclick="this.form.elements['DELIVERY DATE'].disabled=true; this.form.elements['IMMEDIATELY'].value=''; return true;"> 
IMMEDIATELY 
 
<INPUT TYPE="radio" NAME="DELIVERY TIME" VALUE="SPECIFIED DATE" onclick="this.form.elements['DELIVERY DATE'].disabled=false; this.form.elements['SPECIFIED DATE'].value=''; return false;">SPECIFIED DATE 
 
DATE:Month: 
 
<INPUT TYPE="TEXT" NAME="DELIVERY DATE" VALUE="MONTH" SIZE="2"> 
 
Day: 
 
<INPUT TYPE="TEXT" NAME="DELIVERY DATE" VALUE="Day" SIZE="2"> 
 
Year:<INPUT TYPE="TEXT" NAME="DELIVERY DATE" VALUE="Year" SIZE="4"> 
 
I'm trying to get all three text boxes {month, day and year} to turn off when the "immediately" radio button is clicked and all three to turn on when the "specified date" radio button is clicked. It works fine if I only include the "month" text box but when I add the two others it fails. I tried renaming each text box "DD1","DD2","DD3" and accounting for that in the "onclick" commands to no avail.Originally posted by Dave Clark 
this.form.elements['DELIVERY DATE'][0].disabled=true; 
this.form.elements['DELIVERY DATE'][1].disabled=true; 
this.form.elements['DELIVERY DATE'][2].disabled=true; 
 
Dave

I'm new to html but somehow I'm embarrassed I didn't know that one. But I appreciate your patience. Thanks for all the help. I think I'm finally out of the worst of it. Well, thats is, until I get to account managers. (sigh)

radio button text box interaction?

liunx

Guest