Solved

Checkbox onChange event

Posted on 2004-08-17
11
494 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

691 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