Solved

Radio Button onClick

Posted on 2004-08-24
13
448 Views
Last Modified: 2012-05-05
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
Comment
Question by:mattcorc
13 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 11882295
it should work the same ... show us the radio code.
0
 

Author Comment

by:mattcorc
ID: 11882362
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
 

Author Comment

by:mattcorc
ID: 11882371
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 11884113
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
 
LVL 19

Accepted Solution

by:
dakyd earned 150 total points
ID: 11885114
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
 

Author Comment

by:mattcorc
ID: 11889601
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Expert Comment

by:dakyd
ID: 11892416
Sure thing, glad you got what you wanted.
0
 

Expert Comment

by:tommydowns
ID: 11892471
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
 

Author Comment

by:mattcorc
ID: 11892526
Apologies for that. Was logged in with my work userid and not my personal one. Same question as above still applies.

Cheers,

mattcorc
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11894319
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
 

Author Comment

by:mattcorc
ID: 11900614
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
 
LVL 19

Expert Comment

by:dakyd
ID: 11902785
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
 

Author Comment

by:mattcorc
ID: 11903361
Thanks very mcuh Dakyd, exactly what i wanted!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now