Solved

Radio Button onClick

Posted on 2004-08-24
13
447 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

747 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

10 Experts available now in Live!

Get 1:1 Help Now