radio button text box interaction?

[mike444]

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.

[mike444]

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.

[mike444]

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;">

[mike444]

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. :D
Sorry.

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

[mike444]

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

Dave

Who's Dobby? :confused:

[mike444]

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. :o

[mike444]

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;">
<FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>IMMEDIATELY</B></I></FONT>

<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;"><FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>SPECIFIED DATE</B></I></FONT>

<FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>DATE:</B></I></FONT><FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>Month:</B></I></FONT>

<INPUT TYPE="TEXT" NAME="DELIVERY DATE" VALUE="MONTH" SIZE="2">

<FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>Day:</B></I></FONT>

<INPUT TYPE="TEXT" NAME="DELIVERY DATE" VALUE="Day" SIZE="2">

<FONT COLOR="#FFFF00" SIZE="3" ID="put"><I><B>Year:</B></I></FONT><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.

[mike444]

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


:o
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)