?
Solved

document.myform.elements.length not working - plus another related question

Posted on 2009-02-16
8
Medium Priority
?
718 Views
Last Modified: 2013-11-18
I use PHP to construct a form 'myform' containing some members of a club -the names are extracted from a mySQL database -  I want to use the checkbox for later action.  The "phrase" used to construct the checkbox next to each is as follows:
<input type='checkbox' name='addme' id='addme' onClick='addthis()'>

As expcted I can get addthis() to activate BUT I cannot get document.myform.addme.length (or any variations of this to give me anything other than "undefined".  Very annoying.

Each member has a unique membership ID - Second issue is that I want to use addthis() to ab able to populate another  array with the membership id according to the position (element aray postion) of any particular checkbox - however I cannot find the position of the checkbox without looping through all (potentially 500 plus names) - also this method doesnt work as any number of checkboxes may be checked.  I need a checkbox to be able to "reports its array element number"...  I hope that makes sense.

Any suggestions welcome please......

Relevant extracts:
 
<script type="text/javascript">
var nummems = document.addmemform.addme.length;
var aaaa = new Array();
var bbbb = new Array();
 
function addthis() { 
	alert(nummems);
}
</script>
 
// AND:
 
if ($listaction == "ADDMEMS") {
 
	$sqlquery="SELECT DISTINCT * FROM maillist WHERE list_id ='$listid'";
	$sqlresult = mysql_query($sqlquery)or die ('LISTMAINT: Unable to retrieve mail list information' . mysql_error());
	if (mysql_num_rows($sqlresult) == 1 ) {
		$r_listid = mysql_result($sqlresult, 0, 'list_id');
		$r_listtitle = mysql_result($sqlresult, 0, 'list_title');
 
		print"
		<body>
		<center>
		<form name='listmemform' id='listmemform' action='kbvsac-listmemsmaint.php' method='POST'>
		<table width='700' border='1' align='center' cellpadding='8' cellspacing='0' bgcolor='#CCCC99'>
			<tr>
			<td bgcolor='#CCCCCC'>
			<center>
			<font size='2' face='Tahoma'><br>
			ADD CONTACTS TO: ".$r_listtitle; 
		print "<br>
			<br>
			</font></center>
			</td>
			</tr>
			<tr>
  	 		 <tr><td>";
 
 
		$sqlquery="SELECT * FROM members WHERE mem_id NOT IN (SELECT mem_id FROM listmems WHERE listmems.list_id ='$listid') ORDER BY members.lastname ASC" ;
		$sqlresult = mysql_query($sqlquery)or die ('LISTMAINT: Unable to retrieve contact information' . mysql_error());
		$num_rows = mysql_num_rows($sqlresult);
		if ($num_rows > 0) {
			print "<form name='addmemform' id='addmemform'><table width='80%' align='center' border='0' cellpad='4'>
				<tr><td width='8%'><font size='2' face='Tahoma'><b>ADD</b></font></td>
				<td width='40%'><font size='2' face='Tahoma'><b>CONTACT</b></font></td>
				<td ><font size='2' face='Tahoma'><b>EMAIL</b></font></td></tr><tr>";
			$i = 0;
			while ($i < $num_rows ) {
				print "<td><input type='checkbox' name='addme' id='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>".mysql_result($sqlresult, $i, 'lastname').", ".mysql_result($sqlresult, $i, 'firstname')."</font></td><td><font size='2' face='Tahoma'>".mysql_result($sqlresult, $i, 'email')."</font></td><tr>";
/*mysql_result($sqlresult, $i, 'mem_id')  */
				$i++;
			}
	
		print "<input type='hidden'>
			</form></table></td></tr><tr>
			<td align='center' bgcolor='#CCCCCC'>
   			<button style='width:150' onClick=\"window.location='kbvsac-lists.php'; return false;\">CANCEL</button>
			&nbsp;&nbsp;&nbsp;&nbsp;   		
			<button style='width:150' onClick=\"window.location='kbvsac-lists.php'; return false;\">SAVE</button>
			</td>
			</tr>
		</table>
		</center>
		<form name='listmemform' id='listmemform' action='../kbvsac/kbvsac-listmemsmaint.php' method='POST'>
       		<input type='hidden' name='listid' id="; echo $r_listid; print " 
       		<input type='hidden' name='listtitle' id="; echo $r_listtitle; print "
		</form>
		";
		}
		else print "<p align='center'>No contacts left to go onto list...<p>";	
	}
}

Open in new window

0
Comment
Question by:spw2000
  • 4
  • 4
8 Comments
 
LVL 7

Expert Comment

by:tg_wilk
ID: 23649023
below is the example how to access checkboxes - it works in FF3 and IE6. It might have something to do with using the same id many times. Id is supposed to be unique.

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
  </head>
  <body>
<form name="myform">
check1 <input type='checkbox' name='addme' onClick='addthis()'><br>
check2 <input type='checkbox' name='addme' onClick='addthis()'><br>
<script type="text/javascript">
alert(document.myform.addme.length);
</script>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:spw2000
ID: 23649091
Thanks for the reply - I removed the id='addme' but same result - still get "undefined" for both document.addmemform.addme.length and document.addmemform.elements.length.

Not sure if you saw the attached code - was added in some minutes after I submitted the question the first tiem - it did however still have the id='addme' in it.

What else should I be looking at???
0
 
LVL 7

Expert Comment

by:tg_wilk
ID: 23649276
It would be helpful if you post the exact html that is produced by your script. (View > Page source).
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:spw2000
ID: 23649377
As requested - was actually just preparin that when you asked..
:)
I did truncate it as the full page has hundreds of members listed.

Your code worked but when I adjusted my code to get rid of the duplicating id='addme" it made no difference - hopefully you can spot what i did wrong??

<html>
<head>
<title>Kiteboarding Victoria</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<meta name='Keywords' content='KBV, kbv.org.au, kite, beach, kitebeach, kites, kitesurf, kitesurfer, kitesurfing, board, kiteboard, kiteboarding, kiting, elwood, st.kilda, brighton, gelong, point henry, inverloch, naish, cabrinha, ocean rodeo, north, slingshot, wake, wakeboard, directional, weather, wind, tuition, safety, loops, wind, lessons, boost, air, sail, rig, lines, pump'>	
<meta name='Description' content='Kiteboading Victoria, Melbourne, Australia. Kitesurfing community, weather reports, events, news, pictures, locals, etc'>
<style type='text/css'>
a:link{ text-decoration: none; color:#003366 }
a:visited{ text-decoration: none; color:#003366 }
a:hover{ text-decoration: underline; color:#FFFFFF }
</style>
 
<!--
 
<script type="text/javascript" src="../ajax/dojoroot/dojo/dojo.js"
    djConfig="parseOnLoad: true">
</script>
 
<style type="text/css">
	@import "../ajax/dojoroot/dijit/themes/tundra/tundra.css";
	@import "../ajax/dojoroot/dojo/resources/dojo.css";
</style>
 
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
	dojo.require("dijit.form.Button");
</script>
 
<script type="text/javascript">
function ajaxPutback(data,ioArgs) {
	if (data == '1')  {
		window.location='kbvsac-lists.php';
	}
	else {
		alert (data);
	}
}
 
function ajaxError(data, ioArgs) {
	alert(data);
	alert('Error when retrieving/saving data on the server!');
}
 
-->
<script type="text/javascript">
 
var nummems = document.addmemform.elements.length;	
var aaaa = new Array();
var bbbb = new Array();
 
function addthis() { 
	alert(document.addmemform.addme.length);
}
</script>
 
 
</head>
 
<body background='../images/blue-bg.jpg' topmargin='0' font='Tahoma' size='2' color='#000000'>
<center>
<table width='800' border='0' cellspacing='0' cellpadding='0'>
   <tr>
      <td>
 
		<body>
		<center>
		<form name='listmemform' id='listmemform' action='kbvsac-listmemsmaint.php' method='POST'>
		<table width='700' border='1' align='center' cellpadding='8' cellspacing='0' bgcolor='#CCCC99'>
			<tr>
			<td bgcolor='#CCCCCC'>
			<center>
			<font size='2' face='Tahoma'><br>
			ADD CONTACTS TO: This is a new one!! so there...<br>
			<br>
			</font></center>
			</td>
			</tr>
			<tr>
  	 		 <tr><td><form name='addmemform' id='addmemform'><table width='80%' align='center' border='0' cellpad='4'>
				<tr><td width='8%'><font size='2' face='Tahoma'><b>ADD</b></font></td>
				<td width='40%'><font size='2' face='Tahoma'><b>CONTACT</b></font></td>
				<td ><font size='2' face='Tahoma'><b>EMAIL</b></font></td></tr><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Abbey, Campbell</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Adnam, Fin</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Aitken, Beth</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Alexander, Michael</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Allan, Darren</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Allen-Craig, Campbell</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Almagor, Daniel</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Andersen, Morten</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Anderson, Boombie</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Anderson, Matt</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Anderson-nicholls, Thom</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Anderton, Spencer</font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>ANDRIEU, JOHAn </font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr><td><input type='checkbox' name='addme' onClick='addthis()'></td><td><font size='2' face='Tahoma'>Armsby, John </font></td><td><font size='2' face='Tahoma'>abc@def.gh</font></td><tr>
.
.truncated here
.
<tr></form></table></td></tr><tr>
			<td align='center' bgcolor='#CCCCCC'>
   			<button style='width:150' onClick="window.location='kbvsac-lists.php'; return false;">CANCEL</button>
			&nbsp;&nbsp;&nbsp;&nbsp;   		
			<button style='width:150' onClick="window.location='kbvsac-lists.php'; return false;">SAVE</button>
			</td>
			</tr>
		</table>
		</center>
		<form name='listmemform' id='listmemform' action='../kbvsac/kbvsac-listmemsmaint.php' method='POST'>
       		<input type='hidden' name='listid' id=3 
       		<input type='hidden' name='listtitle' id=This is a new one!! so there...
		</form>
		
      </td>
   </tr>
</table>
</center>
<style type='text/css'>
 
<!--
.footer {
	font-family: Tahoma;
	font-size: 10px;
	color: #003366;
}
-->
</style>
 
<br />
<div align='center'>
<img src='../images/kbv-below.jpg'/><br>
<table width='808' border='0' cellspacing='0' bgcolor='CCCC99' bordercolor='CCCC99'>
<tr>
<td align='center'>
<span class='footer'>
<a href='../kbvmain/kbv-sitemain.php' target='mainFrame'>Home</a> <font color='#000000'><b>|</b></font> 
<a href='../kbvmain/kbv-privacy.php' target='mainFrame'>Privacy Policy</a><font color='#000000'><b>|</b></font> 
<a href='../kbvmain/kbv-sitemap.php' target='mainFrame'>Site Map</a><font color='#000000'><b>|</b></font> 
<a href='../kbvmain/kbv-signup.php' target='mainFrame'>Sign Up</a><font color='#000000'><b>|</b></font> 
<a href='../kbvmain/kbv-contact.php' target='mainFrame'>Contact Us</a><p>
<a href='http://www.spw-web.com' target = '_Blank'><img src='../images/sitemby.gif' width='130' height='26' border='0' usemap='#Map' longdesc='Site maintained by spw-online' ></a>
<br>
Copyright &copy; KiteBoarding Victoria (KBV) 2008/9 ALL RIGHTS RESERVED
<map name='Map' id='Map'>
   <area shape='rect' coords='-8,-3,128,26' href='http://www.spw-web.com' target='_blank' alt='Site maintained by spw-online' />
</map>   
</p>
</td>
</tr>
</table>
</div>
</body>
</html>

Open in new window

0
 
LVL 7

Expert Comment

by:tg_wilk
ID: 23649454
First of all, you've got two forms named the same "listmemform", which is probably ok, but not very consistent.
The real problem is, that you have a form in a form like:

<form> ... <form>here's the form you want to access</form> ... </form>

Turn it to:

<form>......</form>
<form>here's the form you want to access</form>

and it should work.
0
 

Author Comment

by:spw2000
ID: 23649543
Thanks - that was it - actually removed the other form and can put it in later if I need to.

NOW for the real problem - for ease I will use your code - what I want to achieve is by clicking on a check box I need to know what # in the element array it is - need to do this without looping through all elements each timeas the form can potentially have hundreds of name - the current onbe has 615 names.
// what i really would like to have:
function addthis() {
	Something simple that will show '0' when i click the first checkbox, '3' when i click check4, etc etc - but without having to loop through each time...
}
 
document.myform.addme.length works fine in the following:
 
 
<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
 
<script type="text/javascript">
function addthis() {
	alert(document.myform.addme.length);
}
</script>
 
 </head>
  <body>
<form name="myform">
<table>
<tr><td>check1 <input type='checkbox' name='addme' onClick='addthis()'></td></tr>
<tr><td>check2 <input type='checkbox' name='addme' onClick='addthis()'></td></tr>
<tr><td>check3 <input type='checkbox' name='addme' onClick='addthis()'></td></tr>
<tr><td>check4 <input type='checkbox' name='addme' onClick='addthis()'></td></tr>
<tr><td>check5 <input type='checkbox' name='addme' onClick='addthis()'></td></tr>
</table>
</form>
</body>
</html>
 
<body>
</body>
</html>

Open in new window

0
 
LVL 7

Accepted Solution

by:
tg_wilk earned 450 total points
ID: 23649712
You can produce the numbers with some counter increased with each loop.
<script>
function addthis(key)
{
  var input = document.myform.addme[key];
}
</script>
 
<form name="myform">
<table>
<tr><td>check1 <input type='checkbox' name='addme' onClick='addthis(0)'></td></tr>
<tr><td>check2 <input type='checkbox' name='addme' onClick='addthis(1)'></td></tr>
<tr><td>check3 <input type='checkbox' name='addme' onClick='addthis(2)'></td></tr>
<tr><td>check4 <input type='checkbox' name='addme' onClick='addthis(3)'></td></tr>
<tr><td>check5 <input type='checkbox' name='addme' onClick='addthis(4)'></td></tr>
</table>
</form>

Open in new window

0
 

Author Comment

by:spw2000
ID: 23649794
My thanks for your persistence - I agree - there does not seem to be any other way - I did something less elegant (see attAched)  than your suggestion using a unique id based on the same counter principle - only problem is that I then have to strip off some text to be left with a number - suppose an ID could be numeric but i am sure that is not good practice.  

I will go with your one instead. My thanks again - it is 1:am here in Australia so a good time to call it quits for the day...
<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
 
<script type="text/javascript">
function addthis(thisid) {
	var xx = thisid.substr(2);
	alert(xx);
}
</script>
 
 </head>
  <body>
<form name="myform">
<table>
<tr><td>check1 <input type='checkbox' name='addme' id='cb0' onClick='addthis(this.id)'></td></tr>
<tr><td>check2 <input type='checkbox' name='addme' id='cb1' onClick='addthis(this.id)'></td></tr>
<tr><td>check3 <input type='checkbox' name='addme' id='cb2' onClick='addthis(this.id)'></td></tr>
<tr><td>check4 <input type='checkbox' name='addme' id='cb3' onClick='addthis(this.id)'></td></tr>
<tr><td>check5 <input type='checkbox' name='addme' id='cb4' onClick='addthis(this.id)'></td></tr>
<tr><td>check6 <input type='checkbox' name='addme' id='cb5' onClick='addthis(this.id)'></td></tr>
<tr><td>check7 <input type='checkbox' name='addme' id='cb6' onClick='addthis(this.id)'></td></tr>
<tr><td>check8 <input type='checkbox' name='addme' id='cb7' onClick='addthis(this.id)'></td></tr>
<tr><td>check9 <input type='checkbox' name='addme' id='cb8' onClick='addthis(this.id)'></td></tr>
<tr><td>check10 <input type='checkbox' name='addme' id='cb9' onClick='addthis(this.id)'></td></tr>
<tr><td>check11 <input type='checkbox' name='addme' id='cb10' onClick='addthis(this.id)'></td></tr>
<tr><td>check12 <input type='checkbox' name='addme' id='cb11' onClick='addthis(this.id)'></td></tr>
<tr><td>check13 <input type='checkbox' name='addme' id='cb12' onClick='addthis(this.id)'></td></tr>
<tr><td>check14 <input type='checkbox' name='addme' id='cb13' onClick='addthis(this.id)'></td></tr>
<tr><td>check15 <input type='checkbox' name='addme' id='cb14' onClick='addthis(this.id)'></td></tr>
<tr><td>check15 <input type='checkbox' name='addme' id='cb15' onClick='addthis(this.id)'></td></tr>
<tr><td>check16 <input type='checkbox' name='addme' id='cb16' onClick='addthis(this.id)'></td></tr>
<tr><td>check17 <input type='checkbox' name='addme' id='cb17' onClick='addthis(this.id)'></td></tr>
<tr><td>check18 <input type='checkbox' name='addme' id='cb18' onClick='addthis(this.id)'></td></tr>
<tr><td>check19 <input type='checkbox' name='addme' id='cb19' onClick='addthis(this.id)'></td></tr>
</table>
</form>
</body>
</html>
 
<body>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
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