asked on

Javascript in ASP (Enabling/disabling radio buttons based on drop down selection)

Hi,

Pls have a look at code below:

              <select name="cboFLBP" onchange="DisplayFLBPControls()">
                   <option value="NA" <% if msFLBP="NA" then Response.Write "selected" %>>n/a</option>
                   <option value="FL" <% if msFLBP="FL" then Response.Write "selected" %>>Front
                   Load</option>
                   <option value="BP" <% if msFLBP="BP" then Response.Write "selected" %>>By
                   Pass</option>
                   </select>

                   <td class="Label" nowrap width="0">
                   <div id='divFLCreditNote' align="right"><font face="Arial" size="2">Credit Note</font></div>
                   </td>
                   <td align="left" nowrap width="90%">
                                                Yes<input type=radio id='txtFLCreditNote' name='txtFLCreditNote' value='1' <%if miFLCreditNote = True then Response.Write " Checked "%>></INPUT>
                                                No<input type=radio id='txtFLCreditNote' name='txtFLCreditNote' value='0' <%if miFLCreditNote = False then Response.Write " Checked "%>></INPUT>
                   </td>

function DisplayFLBPControls()
                        {      switch(formEdit.cboFLBP.value)
                              {
                                    case 'NA':
                                          divFLCreditNote.style.visibility = 'hidden'
                                          formEdit.txtFLCreditNote.style.visibility = 'hidden'
                                          break;

                                    case 'FL':
                                          divFLCreditNote.style.visibility = 'visible'
                                          formEdit.txtFLCreditNote.style.visibility = 'visible'
                                          break;

                                    case 'BP':
                                          divFLCreditNote.style.visibility = 'hidden'
                                          formEdit.txtFLCreditNote.style.visibility = 'hidden'
                                          break;
                              }
                        }

Problem:

When u go to make changes: (Select "FL" from the drop down then "Credit Note" label is hidden but it displays "yes or No" radio buttons.

Why its display radio buttons when it should not ?

Can anybody pls help.

pauljk1619

You code says if it's 'FL', they both should be visible. Are you getting any javascript errors at the bottom left corner of i.e. when you change the dropdown? It will turn into a yellow exclamation point.

John_Lennon

seems like the problem is that you have 2 radiobuttons with the same name and javascript dosn't know wich one of them hide/show

i suggest using div to hide/unhide the radio buttons, this also hide tha labels 'yes/no', try something like this

'############### asp
<td align="left" nowrap width="90%">
<div id="divRadioButtons">
Yes<input type=radio id='txtFLCreditNote' name='txtFLCreditNote' value='1' <%if miFLCreditNote = True then Response.Write " Checked "%>></INPUT>
No<input type=radio id='txtFLCreditNote' name='txtFLCreditNote' value='0' <%if miFLCreditNote = False then Response.Write " Checked "%>></INPUT>
</div>
</td>

'############### javascript
function DisplayFLBPControls(){
switch(formEdit.cboFLBP.value){
case 'NA':
divFLCreditNote.style.visibility = 'hidden';
divRadioButtons.style.visibility = 'hidden';
break;
case 'FL':
divFLCreditNote.style.visibility = 'visible';
divRadioButtons.style.visibility = 'visible';
break;
case 'BP':
divFLCreditNote.style.visibility = 'hidden';
divRadioButtons.style.visibility = 'hidden';
break;
}
}

NicksonKoh

Hi radhakrishan,

When there are more than 1 radio button, that object becomes an array of object but and you have to refer to it like radiobutton[0]. When there is only 1 radio button, it is a single object and refer to it as radiobutton. So you js function should be

function DisplayFLBPControls()
{ switch(formEdit.cboFLBP.value)
{
case 'NA':
divFLCreditNote.style.visibility = 'hidden'
for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'hidden';
break;

case 'FL':
divFLCreditNote.style.visibility = 'visible'
for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'visible';
break;

case 'BP':
divFLCreditNote.style.visibility = 'hidden'
for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'hidden';
break;
}
}

Cheers
Nickson

radhakrishan

ASKER

Msg for Nickson,

When I use, what u mention it works. But its shows me "Yes" or "No", no buttons next to it. Just labels.

Any advice:
This is the code:
<input type=radio id="txtFLCreditNote" name="txtFLCreditNote" Value='1' <%if miFLCreditNote = True then Response.Write " Checked "%>>Yes</INPUT>
<input type=radio id="txtFLCreditNote" name="txtFLCreditNote" value='0' <%if miFLCreditNote = False then Response.Write " Checked "%>>No</INPUT>

Again its just displaying "Yes" or "No" when they should be hidden.

Regards

colinshipton

Radio buttons need to have the same name so they form part of the same group (i.e. can only select one from the same group), but all elements should have unique ids.

You have the same name and the same id for the radio buttons which is why it's not working, try something like:

<td align="left" nowrap width="90%">
Yes<input type=radio id='txtFLCreditNote1' name='txtFLCreditNote' value='1' <%if miFLCreditNote = True then Response.Write " Checked "%>></INPUT>
No<input type=radio id='txtFLCreditNote2' name='txtFLCreditNote' value='0' <%if miFLCreditNote = False then Response.Write " Checked "%>></INPUT>
</td>

function DisplayFLBPControls()
{ switch(formEdit.cboFLBP.value)
{
case 'NA':
divFLCreditNote.style.visibility = 'hidden'
formEdit.txtFLCreditNote1.style.visibility = 'hidden'
formEdit.txtFLCreditNote2.style.visibility = 'hidden'
break;

case 'FL':
divFLCreditNote.style.visibility = 'visible'
formEdit.txtFLCreditNote1.style.visibility = 'visible'
formEdit.txtFLCreditNote2.style.visibility = 'visible'
break;

case 'BP':
divFLCreditNote.style.visibility = 'hidden'
formEdit.txtFLCreditNote1.style.visibility = 'hidden'
formEdit.txtFLCreditNote2.style.visibility = 'hidden'
break;
}
}

ASKER CERTIFIED SOLUTION

John_Lennon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial