Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • Last Modified:

Radio Button onClick

Hi there,

I currently have the script:

function displayMsg(checkObj)
{
     if (checkObj.checked == true)
     {
          checkObj.parentElement.parentElement.parentElement.cells[0].innerHTML = "<font face='Arial' size=2><b>Delete This ID ></b></font>";
     }
     else
     {
          checkObj.parentElement.parentElement.parentElement.cells[0].innerHTML = "";
     }    
}

For displaying a message when a checkbox is checked. However, i now wish to use radio buttons - what changes can i make to this to make it work with radio buttons. It is basically displaying a message when the relevant radio button is checked. When it is unchecked the message dissapears.

All of the radio buttons have the same name as they are being returned dynamically.

Many thanks,

Mattcorc
0
mattcorc
Asked:
mattcorc
1 Solution
 
knightEknightCommented:
it should work the same ... show us the radio code.
0
 
mattcorcAuthor Commented:
HI there,

The code for the Radio is:

      <%Do While Not RS.EOF%>
      <TR>

            <TD width="214" align="right" height="20">
        &nbsp;</TD>
            <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="javascript: displayMsg(this)" value="<%=RS.Fields("VUT_VM_USER_ID")%>"></font></TD>
            <TD width="203" align="center" height="20"><font face="Arial"><%=RS.Fields("VUT_VM_USER_ID")%></font></TD>
            <TD width="161" height="20">
        &nbsp;</TD>
            <TD width="188" height="20">&nbsp;</TD>
      </TR>
      <%
      RS.MoveNext
      Loop
      %>
<%End If%>

This is the row containing the radio that is being dynamically returned.

Thanks very much for the quick response!

Mattcorc
0
 
mattcorcAuthor Commented:
It does kind of still work. It displays the message but it doesn't dissapear when the radio is unchecked i.e. another radio is selected

Thanks again,
mattcorc
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
justinbilligCommented:
because all the radio buttons have the same name, you have to access them in array notation or you could assign each one an ID and then check that way
0
 
dakydCommented:
Give this a shot - you can replace the hard-coded table I created with your ASP-generated rows.  All labels for inputs with name="checkbox1" are first erased, then only the one that is checked will have the label added.  Hope that helps.

<html>
<head>
<script type="text/javascript">
function displayMsg(checkObj)
{
     var inps = document.getElementsByTagName("input");
     for (var i = 0; i < inps.length; i ++)
     {
          if (inps[i].name == "checkbox1")
                inps[i].parentNode.parentNode.parentNode.cells[0].innerHTML = "";
     }

     if (checkObj.checked == true)
     {
          checkObj.parentNode.parentNode.parentNode.cells[0].innerHTML = "<font face='Arial'

size=2><b>Delete This ID ></b></font>";
     }
}
</script>
</head>

<body>
<table>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID</font></TD>
          <TD width="161" height="20">
        &nbsp;</TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID2</font></TD>
          <TD width="161" height="20">
        &nbsp;</TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
</table>
</body>
</html>
0
 
mattcorcAuthor Commented:
Hi there,

Apologies for not getting back sooner. I have tried the code you left Dakyd and that is exactly what i was after!! Thanks very much for all the help with this!

mattcorc
0
 
dakydCommented:
Sure thing, glad you got what you wanted.
0
 
tommydownsCommented:
Sorry Dakyd, Just one final thing - is there a way i can have a button that clears any checked radio button and also removes the text that appears when a radio is checked?

Many thanks,

mattcorc
0
 
mattcorcAuthor Commented:
Apologies for that. Was logged in with my work userid and not my personal one. Same question as above still applies.

Cheers,

mattcorc
0
 
dakydCommented:
Something like this?  By the way, duplicate accounts aren't allowed, though I'm no mod.  Hope that helps.

<html>
<head>
<script type="text/javascript">
function displayMsg(checkObj)
{
     var inps = document.getElementsByTagName("input");
     for (var i = 0; i < inps.length; i ++)
     {
          if (inps[i].name == "checkbox1")
          {
                inps[i].parentNode.parentNode.parentNode.cells[0].innerHTML = "";
                inps[i].parentNode.parentNode.parentNode.cells[3].childNodes[0].className = "hidden";
          }
     }

     if (checkObj.checked == true)
     {
          checkObj.parentNode.parentNode.parentNode.cells[0].innerHTML = "<font face='Arial' size=2><b>Delete This ID ></b></font>";
          checkObj.parentNode.parentNode.parentNode.cells[3].childNodes[0].className = "shown";
     }
}

function clearMsg(checkObj)
{
  checkObj.parentNode.parentNode.cells[0].innerHTML = "";
  checkObj.className = "hidden";
}
</script>
<style type="text/css">
.hidden {
  visibility: hidden;
}

.shown {
  visibility: visible;
}
</style>
</head>

<body>
<table>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID</font></TD>
          <TD width="161" height="20"><input type="button" class="hidden"

onclick="clearMsg(this)" value="Clear"></TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID2</font></TD>
          <TD width="161" height="20"><input type="button" class="hidden"

onclick="clearMsg(this)" value="Clear"></TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
</table>
</body>
</html>
0
 
mattcorcAuthor Commented:
Hi Dakyd,

That does seem like what i'm looking for but it doesn't uncheck the radio button. I'll have a play around with it though and see what i can do

Many thanks!

mattcorc

Also, apologies about the other account. It's a colleague who was also trying to solve a problem had left them self in. It's a standard work acc. This is my personal one.

Cheers

matt
0
 
dakydCommented:
Oops, my mistake, left that part out.  Here's one that will uncheck the radio button.  It actually unchecks ALL radio buttons in named "checkbox1" when you hit clear, but since only one of them at a time is ever checked, then the effect is to uncheck the only radio button that was checked.  Hope that helps.

<html>
<head>
<script type="text/javascript">
function displayMsg(checkObj)
{
     var inps = document.getElementsByTagName("input");
     for (var i = 0; i < inps.length; i ++)
     {
          if (inps[i].name == "checkbox1")
          {
                inps[i].parentNode.parentNode.parentNode.cells[0].innerHTML = "";
                inps[i].parentNode.parentNode.parentNode.cells[3].childNodes[0].className =

"hidden";
          }
     }

     if (checkObj.checked == true)
     {
          checkObj.parentNode.parentNode.parentNode.cells[0].innerHTML = "<font face='Arial'

size=2><b>Delete This ID ></b></font>";
          checkObj.parentNode.parentNode.parentNode.cells[3].childNodes[0].className = "shown";
     }
}

function clearMsg(checkObj)
{
  checkObj.parentNode.parentNode.cells[0].innerHTML = "";
  checkObj.className = "hidden";

  var inps = document.getElementsByTagName("input");
  for (var i = 0; i < inps.length; i ++)
  {
    if (inps[i].name == "checkbox1")
      inps[i].checked = false;
  }
}
</script>
<style type="text/css">
.hidden {
  visibility: hidden;
}

.shown {
  visibility: visible;
}
</style>
</head>

<body>
<table>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID</font></TD>
          <TD width="161" height="20"><input type="button" class="hidden" onclick="clearMsg(this)" value="Clear"></TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
     <TR>
          <TD width="214" align="right" height="20">
        &nbsp;</TD>
          <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="radio" name=checkbox1  onClick="displayMsg(this)" value="Blah"></font></TD>
          <TD width="203" align="center" height="20"><font face="Arial">SomeID2</font></TD>
          <TD width="161" height="20"><input type="button" class="hidden" onclick="clearMsg(this)" value="Clear"></TD>
          <TD width="188" height="20">&nbsp;</TD>
     </TR>
</table>
</body>
</html>
0
 
mattcorcAuthor Commented:
Thanks very mcuh Dakyd, exactly what i wanted!!
0
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.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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