Javascript to show text box in radio button list when clicked

[wbodger]

OK, I have a list of events that is pulled from a database. I want to be able to show a text box where they can enter the number of registrants only when they choose that radio button. So, each radio button would have a text box, but that text box needs to have the same name for each event in the list. What I have been able to find looks like it uses IDs, which have to be unique, right?

So, can anybody help me out here? Maybe give me a good start? I've always been more of a vbscript/SQL guy, thanks for the help!!

WB

 

[vacunita]

ID's should be unique.

Can they choose more than one event? What happens if they want to un-select an event? Radio buttons can't be unchecked.

You could use getElementsByName() to get all the textboxes with the same name, but there's no way to identify which text box then belongs to the radio button.

Why can't you give them unique ID's?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wbodger]

Hmm... I guess I can give them unique IDs, but all the same name, right?

No, they can only choose one event (hence the radio buttons and not checkboxes) and I was wondering what would happen to the text box if they selected one event, filled in the text box and then decided on another event instead. That really shouldn't happen, but if it does, I can't be sending 2 values with the same name, what will take precedence?

wb

 

[vacunita]

You'd probably want to not only hide but also disable the text box if another event is chosen. Disabled form elements technically will not get sent.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wbodger]

Cool, I'll give it a shot. For the Radio button being chosen, it is an onclick event, right? How would I identify when a different radio button is chosen?

wb

 

[vacunita]

Craft your function so you pass the radiobutton that has been clicked.

function myfunction(radiobutton){
...

}

------

<input type=radio onClick="myfunction(this);">

The "this" keyword will pass the object reference of the clicked radiobutton. And the "radiobutton" variable will get it and be available inside the function.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wbodger]

Hmm... So, I am sure I am missing something. Here is my function

    <script type="text/javascript">
    function checkIt(RadioButton){
        document.getElementById('text').style.display="block";
        }
    </script>

and the call

			<tr>
				<td width="10"><input type="radio" name="event_id" value="<%=rs("event_id")%>" id="num_spaces<%=n%>" <%=disabled_radio%> onclick="checkIt(this);"></td>
				<td ><%=rs("sub_event")%>&nbsp;&nbsp;<%=disabled_text%></td>
				<td align="left" ><%=rs("event_date")%>, <%=rs("event_year")%></td>
				<td align="left" >$<%=rs("cost")%>.00</td>
				<td align="left" >$<%=rs("deposit_cost")%>.00</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td colspan="4" id="text" style="display:none;">Number of Spaces<input type="text" name="txt_space" id="num_spaces<%=n%>"/><br /></td>
			</tr>

where n increments for each loop thru the recordset. This hides and displays the text box, but always in the same position right after the first record. I had a bit more thorough function

    <script type="text/javascript">
    function checkIt(RadioButton){
        if (RadioButton.value=="304") {
        document.getElementById('text').style.display="block";
        }
        else {
        document.getElementById('text').style.display="none";
        document.getElementById('txt_space').value='';
        }
        }
    </script>

but the effect was the same. So, how can I get the text box to go with the radiobutton? OK, I tried a few different things including having an incremented variable as the id to show/hide, but that didn't work at all. My guess is that I defined a vbscript variable and then tried to access it in javascript.

Anyway, that to say I am out of ideas and any more help I can get would be most appreciated.

Thanks again for your help!

WB

 

[vacunita]

Do you want to hide the text box or the table cell?

both your functions use document.getElementById but they try to get an element with an ID of text. Wich points to your TD's. I'll assume all your TD's have the same ID so how does it know which one to get. Added to that the getElementById function returns a single object, (the first one it finds) and you are of course stuck displaying the very fist text box it finds.

You'd want to make your text box ID's unique. They are not unique. The radio button and the text box share an ID. which again makes it impossible to get the text box.

Try this:

<td colspan="4" id="text" style="display:none;">Number of Spaces<input type="text" name="txt_space" id="[red]txt_[/red]num_spaces<%=n%>"/><br />

Then in your function:

<script type="text/javascript">
    function checkIt(RadioButton){
        document.getElementById([red]'txt_'[/red] + [blue]RadioButton.id[/blue]).style.display="block";
        }
    </script>

That lets you identify the text box by using the id of the clicked radio button.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wbodger]

OK, this works to a point. Still not sure how to disable the text box they have decided against. So, if they choose option A and enter a number, then decide on choice B, it sends BOTH values to the next page.

Here is what I have

<script type="text/javascript">
function checkIt(RadioButton){
  document.getElementById('txt_' + RadioButton.id).style.display="block";
}
</script>

and then the call

<tr>
<td width="10"><input type="radio" name="event_id" value="<%=rs("event_id")%>" id="num_spaces<%=n%>" <%=disabled_radio%> onclick="checkIt(this);"></td>
<td ><%=rs("sub_event")%>&nbsp;&nbsp;<%=disabled_text%></td>
<td align="left" ><%=rs("event_date")%>, <%=rs("event_year")%></td>
<td align="left" >$<%=rs("cost")%>.00</td>
<td align="left" >$<%=rs("deposit_cost")%>.00</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="4" id="txt_num_spaces<%=n%>" style="display:none;">Number of Spaces<input type="text" name="txt_space"/><br /></td>
</tr>

So, how do I disable the first text box when another one opens up? I do not care to keep the value that was there is they decide to go back to their first choice.

wb

 

[vacunita]

Your best bet is to just loop through all of the boxes and disable them before you enable and show the selected one.

That way you make sure only one box can ever be enabled and sent.

var theBoxes=document.getElementsByName('txt_space');
var i=0;
for(i=0;i<=theBoxes.length-1; i++){
theBoxes[i].disabled='disabled';
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/