Dynamically Named form elements

conundrum · September 25th, 2003, 11:09 PM

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

pgtips · September 26th, 2003, 03:10 AM

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

conundrum · September 26th, 2003, 02:13 PM

I will give that a shot. Thanks

conundrum · September 30th, 2003, 03:50 PM

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>

pgtips · October 1st, 2003, 04:04 AM

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