• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 356
  • Last Modified:

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.
0
radhakrishan
Asked:
radhakrishan
1 Solution
 
pauljk1619Commented:
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.
0
 
John_LennonCommented:
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;
  }
}
0
 
NicksonKohCommented:
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
radhakrishanAuthor Commented:

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
0
 
colinshiptonCommented:
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;
                         }
                    }
0
 
John_LennonCommented:
its gonna show you the labels because you don't especify to hide them, you are only telling the program to hide the radio buttons, not the label, in fact "yes/no" are only words in the document, javascript dosn't know they are label

to hide them, you can use my previous suggestion to use a div to hide radio buttons and "yes/no" labels, or you can change your code like this:

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

'########### javascript

function DisplayFLBPControls(){
  switch(formEdit.cboFLBP.value){
    case 'NA':
      for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'hidden';
      lbl1.style.visibility = "hidden";
      lbl2.style.visibility = "hidden";
      break;
    case 'FL':
      for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'visible';
      lbl1.style.visibility = "visible";
      lbl2.style.visibility = "visible";
      break;
    case 'BP':
      for (var i=0; i<formEdit.txtFLCreditNote.length; i++) formEdit.txtFLCreditNote[i].style.visibility = 'hidden';
      lbl1.style.visibility = "hidden";
      lbl2.style.visibility = "hidden";
      break;
  }
}
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now