?
Solved

Checkbox onChange event

Posted on 2004-08-17
11
Medium Priority
?
502 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:mattcorc
  • 6
  • 4
11 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 11818993
Instead onChange use onClick.
And show us your html source from a example browser page.
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11819262
<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
 

Author Comment

by:mattcorc
ID: 11820000
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:RozanaZ
ID: 11820081
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
 

Author Comment

by:mattcorc
ID: 11820185
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
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11820425


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

Expert Comment

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

Author Comment

by:mattcorc
ID: 11820493
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
 
LVL 8

Accepted Solution

by:
RozanaZ earned 600 total points
ID: 11820572
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
 

Author Comment

by:mattcorc
ID: 11820642
Thats got it! Thanks very much for all the help!
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11820668
You are welcome!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

862 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