• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 457
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

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