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.
radhakrishanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.