Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 25th, 2003, 11:09 PM
Authorized User
 
Join Date: Sep 2003
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to conundrum Send a message via AIM to conundrum Send a message via Yahoo to conundrum
Default Dynamically Named form elements

I am in need of some assistance. I am using a combination of Javascript and ASP w/vbscript. What i want to do is the following have a table display the contents of a data base and put the values into a form. One row in the table per row in the database. So some of the form elements will need to be dynamically named.

TO the issue.

Lets say i have checkbox1...checkboxN I want to be able to click the check box and have it enable/disable the row and/or change the background color of the row depending on the particular application. I have the code to do so when I have a static form element name but not dynamically named form elements. The other thing I want to do is be able to fill in a textbox by clicking on a link. Again i have the code if I know the name of the field ahead of time but to do it so that i can say pass the name of the field via the function call i can not seem to get it working.

i have tried things such as the following PSEUDOCODE

function y(elementId,value)(for the disbling/enabling)
{
var x=document.getElementById("elementId")
if (formName.x.checked)
 formName.someOtherField.disabled=value
etc
}

and similar such methods for the other types of problems. but I always get an error when I use the variable name in between the formName and checked for example. I have also tried

formName.+X+.checked
formName."baseFieldName"+therestofthedynamicallypu lledidentifier.checked
formName.document.getElementById("elementId".check ed
formName.passedFieldName.checked

and several other things...

nothing hs worked...
 
Old September 26th, 2003, 03:10 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , United Kingdom.
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

Ok, I see you're getting a bit mixed up here. Try using the elements collection of the form, example
function y(elementId,value)(for the disbling/enabling)
{
// note no quotes around elementId coz its a variable not a literal string
var x=document.formName.elements[elementId];

// note no formName in front of x
if (x.checked)
 formName.someOtherField.disabled=value; // this looks OK
etc
}

Here's some comments on why your other attempts didn't work:
1. var x=document.getElementById("elementId")
this would work fine if you leave the quotes off the elementId

2. formName.+X+.checked
you would need to use formName.elements[X].checked, assuming X is a var that contains the id string

3. formName."baseFieldName"+therestofthedynamicallypu lledidentifier.checked
again the elements collection would work here
formName.elements["baseFieldName"+therestofthedynamicallypulledident ifier].checked

4. formName.document.getElementById("elementId").chec ked
lose the formName from the front and this will work provided there is an actual element with id "elementId". But if elementId is a var that contains the field name you need to lose the quotes.

hth
Phil
 
Old September 26th, 2003, 02:13 PM
Authorized User
 
Join Date: Sep 2003
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to conundrum Send a message via AIM to conundrum Send a message via Yahoo to conundrum
Default

I will give that a shot. Thanks

 
Old September 30th, 2003, 03:50 PM
Authorized User
 
Join Date: Sep 2003
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to conundrum Send a message via AIM to conundrum Send a message via Yahoo to conundrum
Default

hmmm...i must have done something wrong. I tried it with a test file and i got a

'checked' is null or not an object error when i executed the page.

Here is the test page I tried it on. Any suggestions as to where my error is would be greatly appreciated.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function isChecked(elementId,value)
 {
  var x=document.form1.elements[elementId];
  var y=document.form1.elements[elementId+1]
  if (x.checked)
   y.disabled=value
  else
   y.disabled=!(value)
 }
</script>
</head>

<body>
<form name="form1" action="" method="post">
<%
  for iLoop=1 to 3 %>
<input type="checkbox" name="checker" id="checkbox<%=iLoop%>" onChange="isChecked(checkbox<%=iLoop%>,false)">
<input id="textbox<%=iLoop%>" name="textbox" disabled>
<%next%>
</form>

</body>
</html>



 
Old October 1st, 2003, 04:04 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , United Kingdom.
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

Ok, there are a few things not quite right:
1. the function isChecked should get a string as the first argument, but you are passing in an object, hence x is undefined so you get an error on x.checked. You need to pass in a string by putting ' round the parameter when you pass it in.
2. This line var y=document.form1.elements[elementId+1] is not right. If you pass in the name of the clicked checkbox as a string, e.g. "checkbox3", then you end up with the statement var y=document.form1.elements["checkbox31"];, but you actually want var y=document.form1.elements["textbox3"];. You need to change your onchange call to just pass in the number, but as a string, then it will work.

Here is a working version:
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function isChecked(elementId,value)
 {
  var x=document.form1.elements["checkbox"+elementId];
  var y=document.form1.elements["textbox"+elementId];
  if (x.checked)
   y.disabled=value;
  else
   y.disabled=!(value);
 }
</script>
</head>

<body>
<form name="form1" action="" method="post">
<% 
  for iLoop=1 to 3 %>
<input type="checkbox" name="checker" id="checkbox<%=iLoop%>" onchange="isChecked('<%=iLoop%>',false)">
<input id="textbox<%=iLoop%>" name="textbox" disabled>
<%next%>
</form>

</body>
</html>
hth
Phil




Similar Threads
Thread Thread Starter Forum Replies Last Post
mech errors with - "There is no form named" - when crmpicco Perl 0 April 13th, 2007 10:29 AM
Dynamically Finding Elements in XSL tclancy XSLT 2 March 1st, 2006 03:25 PM
adding option elements dynamically to a select richard.york Javascript 4 December 5th, 2003 04:57 AM
Dynamically expanding and collapsing elements richard.york Javascript 3 November 26th, 2003 09:17 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.