Solved

Checkbox onChange event

Posted on 2004-08-17
11
489 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

744 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

13 Experts available now in Live!

Get 1:1 Help Now