Checkbox onChange event

Hi there,

I have a table with two columns. One of the right column has checkboxes in which are dynamically returned based on a number of records in a recordset. The other column i want to display the message "delete" if a user selects the adjacent checkbox. I assume this would be done in JavaScript but am unsure how to do this. Can anyone help me with this? Also, the user is allowed to select more than one checkbox so the message "delete" may need to be shown a number of times. I would like the message to go again if the box is unchecked.

Many thanks,

mattcorc
mattcorcAsked:
Who is Participating?
 
RozanaZConnect With a Mentor Commented:
Try this:
function displayMsg(checkObj)
{
     if (checkObj.checked)
     {
                        /*font*/          /*td*/            /*tr*/             /*target cell*/
          checkObj.parentElement.parentElement.parentElement.cells[2].innerHTML = "DELETE";
     }
     else
     {
          checkObj.parentElement.parentElement.parentElement.cells[2].innerHTML = "";
     }    
}
0
 
ZvonkoSystems architectCommented:
Instead onChange use onClick.
And show us your html source from a example browser page.
0
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
function displayMsg(checkObj, rowNum)
{
      rowObj = document.getElementById("row" + rowNum);
      if (checkObj.checked)
      {
            rowObj.innerHTML = "DELETE";
      }
      else
      {
            rowObj.innerHTML = "";
      }      
}
</script>
</HEAD>
<BODY>
      <table border="1" cellspacing="0">            
<form name="f1" id="f1" action="http://1.1.1.1">
            <tr>
                  <td><input type="checkbox" name="ch1" id="ch1" onClick="javascript: displayMsg(this, '1')"></td>
                  <td>data 1</td>
                  <td id="row1"></td>
            </tr>
            <tr>
                  <td><input type="checkbox" name="ch1" id="ch1" onClick="javascript: displayMsg(this, '2')"></td>
                  <td>data 2</td>
                  <td id="row2"></td>
            </tr>
            <tr>
                  <td><input type="checkbox" name="ch1" id="ch1" onClick="javascript: displayMsg(this, '3')"></td>
                  <td>data 3</td>
                  <td id="row3"></td>
            </tr>            
</form>
      </table>
</BODY>
</HTML>
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
mattcorcAuthor Commented:
Thanks for that. However, because the rows are created dynamically i can't name them row1, row2 etc. Is there a generic name they can be given?

Thanks again,

mattcorc
0
 
RozanaZCommented:
If you can you name a table then try this:


<HTML>
<HEAD>
<TITLE></TITLE>

<script>
function displayMsg(checkObj, rowNum)
{
      rowObj = document.getElementById("row" + rowNum);

      var tableObj = document.getElementById("myTable");      
      var objRows         = tableObj.rows;      
    var cellObj   = objRows[rowNum].cells[2];

      if (checkObj.checked)
      {
            cellObj.innerHTML = "DELETE";
      }
      else
      {
            cellObj.innerHTML = "";
      }      
}


</script>
</HEAD>
<BODY>
      <table name="myTable" id="myTable" border="1" cellspacing="0">            
<form name="f1" id="f1" action="http://1.1.1.1">
            <tr>
                  <td><input type="checkbox" name="ch1" id="ch1" onClick="javascript: displayMsg(this, 0)"></td>
                  <td>data 1</td>
                  <td></td>
            </tr>
            <tr>
                  <td><input type="checkbox" name="ch2" id="ch2" onClick="javascript: displayMsg(this, 1)"></td>
                  <td>data 2</td>
                  <td></td>
            </tr>
            <tr>
                  <td><input type="checkbox" name="ch3" id="ch3" onClick="javascript: displayMsg(this, 2)"></td>
                  <td>data 3</td>
                  <td></td>
            </tr>            
</form>
      </table>
</BODY>
</HTML>
0
 
mattcorcAuthor Commented:
HI again,
I get an erro on line 21 of this saying that undefined in null or not an object. However i see that you still use the row number to reference this but i can only name row 1 as this is all i have then the loop dictates how many records i get. The code in total is:

<%@ Language=VBScript %>
<%Option Explicit%>

<%
dim RS, strUserID, myObj, BtnSubmit, o_oErr, my_object

'set my_object = server.CreateObject("CH_GEN_SECUREPHONE.ch_SECUREPHONE")
'my_object.openConn()

strUserID= "S31545"

Set myObj = Server.CreateObject("CH_GEN_VMWARE.cVMWare")

Set Rs = server.CreateObject("ADODB.Recordset")
Set Rs = myObj.VMWARE_USER_ID_GET(strUserID,o_oErr)

if Request.Form("BtnSubmit") = "Submit" Then
dim strVM, strMessage

strVM = Request.Form("InputVM")

Call MyObj.VMWARE_USER_ID_INS(strVM, strUserID, o_oErr)
strMessage = "Information Added"

End if

%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft FrontPage 5.0">
<TITLE>VMWARE User ID</TITLE>
<script>
function displayMsg(checkObj, rowNum)
{
     rowObj = document.getElementById("row" + rowNum);

     var tableObj = document.getElementById("VMTable");    
     var objRows         = tableObj.rows;    
    var cellObj   = objRows[rowNum].cells[3];

     if (checkObj.checked)
     {
          cellObj.innerHTML = "DELETE";
     }
     else
     {
          cellObj.innerHTML = "";
     }    
}


</script>
</HEAD>
<BODY>
<form name="Vmware" method="Post" action="Vmware.asp">
<P>&nbsp;</P>
<TABLE WIDTH="410" BORDER="0" CELLSPACING="1" CELLPADDING="1" align="center" height="115" bgcolor="CECFDE" name="VMTable" id="VMTable">
      <TR bgcolor="#9CA6C6">

            <TD width="703" height="3" colspan="5"><font face="Arial"><b>VMWare User
        Update</b></font></TD>
      </TR>
      <TR>

            <TD width="703" height="1" colspan="5"><font face="Arial" size="2">This
        page allows you to delete and add VMWare accounts against an NT user
        account. Delete account by using the checkboxes next to the relevant
        account and add accounts by entering them into the text box below. Hit
        submit to perform the requested operations.</font></TD>
      </TR>
      <TR bgcolor="#9CA6C6">

            <TD width="703" height="1" colspan="5">
        &nbsp;</TD>
      </TR>
      <TR>

            <TD width="703" height="1" colspan="5">
        <b><font face="Arial" size="2">VMWare ID's for User: <%=strUserID%></font></b></TD>
      </TR>
      <TR>

            <TD width="150" height="19">&nbsp;</TD>
            <TD width="1" height="19">&nbsp;</TD>
            <TD width="203" align="center" height="19">
        <p><b><font face="Arial">VMWare ID:</font></b></TD>
            <TD width="161" height="19">&nbsp;</TD>
            <TD width="188" height="19">&nbsp;</TD>
      </TR>
      
<%If RS.EOF Then%>
      <TR>
            <TD width="703" align="right" height="20" id="row" colspan="5">
        <p align="left"><font face="Arial"><b>No VMWare ID's exist for this user</b></font></TD>
      </TR>
<%End If%>
      
      <%Do While Not RS.EOF%>
      <TR>

            <TD width="150" align="right" height="20">
        &nbsp;</TD>
            <TD width="1" align="right" height="20">
        <font face="Arial">
        <INPUT type="checkbox" id=checkbox1 name=checkbox1 onClick="javascript: displayMsg(this, 1)" value="ON"></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
      %>
      <TR>

            <TD width="448" height="19">&nbsp;</TD>
            <TD width="35" height="19">&nbsp;</TD>
            <TD width="201" height="19">&nbsp;</TD>
            <TD width="161" height="19">&nbsp;</TD>
            <TD width="188" height="19">&nbsp;</TD>
      </TR>
      <TR>

            <TD width="483" height="17" colspan="2">
        <p align="right"><font face="Arial"><b>Add VMWare ID:</b> </font></TD>
            <TD width="201" height="17">
        <p align="center"><font face="Arial">
        <input name="InputVM" size="6"></font></TD>
            <TD width="161" height="17">
        <input type="Submit" value="Submit" name="BtnSubmit"></TD>
            <TD width="188" height="17">&nbsp;</TD>
      </TR>

      <TR>

            <TD width="448" height="19">&nbsp;</TD>
            <TD width="35" height="19">&nbsp;</TD>
            <TD width="201" height="19">&nbsp;</TD>
            <TD width="161" height="19">&nbsp;</TD>
            <TD width="188" height="19">&nbsp;</TD>
      </TR>

      <TR bgcolor="#9CA6C6">

            <TD width="1033" height="26" colspan="5">&nbsp;</TD>
      </TR>
</TABLE>
</form>
<%
Rs.Close
Set Rs = Nothing
set myObj = nothing
%>
</BODY>
</HTML>

Thanks for all your help with this

mattcorc
0
 
RozanaZCommented:


<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function displayMsg(checkObj)
{
     if (checkObj.checked)
     {
          checkObj.parentElement.parentElement.cells[2].innerHTML = "DELETE";
     }
     else
     {
          checkObj.parentElement.parentElement.cells[2].innerHTML = "";
     }    
}
</script>
</HEAD>
<BODY>
<table border="1" cellspacing="0">          
<form name="f1" id="f1" action="http://1.1.1.1">
          <tr>
               <td><input type="checkbox" name="ch1" id="ch1" onClick="javascript: displayMsg(this)"></td>
               <td>data 1</td>
               <td></td>
          </tr>
          <tr>
               <td><input type="checkbox" name="ch2" id="ch2" onClick="javascript: displayMsg(this)"></td>
               <td>data 2</td>
               <td></td>
          </tr>
          <tr>
               <td><input type="checkbox" name="ch3" id="ch3" onClick="javascript: displayMsg(this)"></td>
               <td>data 3</td>
               <td></td>
          </tr>          
</form>
     </table>
</BODY>
</HTML>
0
 
RozanaZCommented:
'2' in  cells[2] means cell index you want to put 'DELETE' in (start counting from 0)
0
 
mattcorcAuthor Commented:
Hi again,

I keep getting the error checkObj.parentElement.parentElement.cells[3]. Is this something to do with where the "Delete message is being paced in my code?

Many thanks,

mattcorc
0
 
mattcorcAuthor Commented:
Thats got it! Thanks very much for all the help!
0
 
RozanaZCommented:
You are welcome!
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.

All Courses

From novice to tech pro — start learning today.