asked on

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

Zvonko

Instead onChange use onClick.
And show us your html source from a example browser page.

RozanaZ

<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>

mattcorc

ASKER

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

RozanaZ

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>

mattcorc

ASKER

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> </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">
 </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"> </TD>
            <TD width="1" height="19"> </TD>
            <TD width="203" align="center" height="19">
<p><b><font face="Arial">VMWare ID:</font></b></TD>
            <TD width="161" height="19"> </TD>
            <TD width="188" height="19"> </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">
 </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">
 </TD>
            <TD width="188" height="20"> </TD>
      </TR>
      <%
      RS.MoveNext
      Loop
      %>
      <TR>

            <TD width="448" height="19"> </TD>
            <TD width="35" height="19"> </TD>
            <TD width="201" height="19"> </TD>
            <TD width="161" height="19"> </TD>
            <TD width="188" height="19"> </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"> </TD>
      </TR>

      <TR>

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

      <TR bgcolor="#9CA6C6">

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

Thanks for all your help with this

mattcorc

RozanaZ

<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>

RozanaZ

'2' in cells[2] means cell index you want to put 'DELETE' in (start counting from 0)

mattcorc

ASKER

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

ASKER CERTIFIED SOLUTION

RozanaZ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mattcorc

ASKER

Thats got it! Thanks very much for all the help!

RozanaZ

You are welcome!