Array of fields

I am developing an application that allows users to submit information via a form. One of the sections of the form is a group of elements that will represent bullet points in the final output. The number of bullet points can vary from submission to submission. Here is the HTML code I wanted to use originally:


<input name="bul_text[]" id="bul_text_0" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text_1" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text_2" type="text" size="80" maxlength="255" value="" />


and so on. The square braces in the name attribute cause PHP (the server side language being used) to treat the various bul_text fields as a single array called bul_text, which makes processing it easier. the code passes validation as XHTML 1.1

One of the features of the system is form autocomplete using AJAX. If the user enters a product code and clicks a "lookup" button then the fields will be autopopulated from a server side script that looks up the product code and returns an XML document. Populating most of the fields works okay but the bullet points create a problem. I haven't found a way to get JavaScript to treat the fields as an array the same way PHP does except to do this:


<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />


When I do this, the following JavaScript fragment then works as I want:


// Update bullet point fields
for (thisBullet = 0; thisBullet < XMLRoot.getElementsByTagName('bullet').length; thisBullet++)
{
if (XMLRoot.getElementsByTagName ('bullet')[thisBullet].firstChild)
{
document.forms ['nominate'].bul_text[thisBullet].value = (XMLRoot.getElementsByTagName('bullet')[thisBullet].firstChild.data);
}
}


but now the HTML fails validation and other useability issues are introduced (I can't use for= in label tags to associate a label with the field). The only solution I can see would involve rewriting the javascript to not use a loop but to explicitly fill each field in turn. This is not a good solution for obvious reasons though. If the number of bullets returned in the XML changes at some future date then the JavaScript will need rewriting as well as the HTML forms.

Does anyone know of a better way of doing this?

first dont give multiple objects the same id:


<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />
<input name="bul_text[]" id="bul_text" type="text" size="80" maxlength="255" value="" />


each object should have its own personal id value.


now on to the other part....
I'm a bit confused, can you explain what exactly you want as an output. an output of text boxes with bullets next them? what is the significance of the bullets? do you ahve an example page that i can view?

In the first example I posted the fields did all have individual IDs, but I couldn't then process them as an array in JavaScript. Giving them all the same ID would allow them to be treated as an array of fields of JavaScript but is not legal HTML and is an inelegant solution anyway.

The application this is for is for allows users to submit products to a database. Along with the other fields a set of tech specs can be included, as bullet points. As the number of bullet points per product can change, they are stored in a seperate table and associated with the data in the main table by foreign keys.

Giving each bullet field a different ID means I have to do the following in JavaScript:


if (XMLRoot.getElementsByTagName ('bullet')[0].firstChild)
{
document.forms ['nominate'].bul_text_0.value = (XMLRoot.getElementsByTagName('bullet')[0].firstChild.data);
}
if (XMLRoot.getElementsByTagName ('bullet')[1].firstChild)
{
document.forms ['nominate'].bul_text_1.value = (XMLRoot.getElementsByTagName('bullet')[1].firstChild.data);
}
if (XMLRoot.getElementsByTagName ('bullet')[2].firstChild)
{
document.forms ['nominate'].bul_text_2.value = (XMLRoot.getElementsByTagName('bullet')[2].firstChild.data);
}
// And so on and so forth

PassiveSmoking:

I believe the following will work for you. I created a Bullets.xml file like this:

<?xml version="1.0" ?>
<list>
<bullet>First Bullet</bullet>
<bullet>Second Bullet</bullet>
<bullet>Third Bullet</bullet>
</list>


Then used AJAX, onload, to read that file and return the xml.
I used your valid xhtml input fields, so ignore the DOCTYPE in the following example code. It has no effect on the outcome.

Test it as is. Copy it and save it as an .html document, and as Bullets.xml

It works for me.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var AdminResponse = "";

function parseBullets(){

var nBullet = AdminResponse.getElementsByTagName('bullet');
var nBulletField = document.getElementsByName('bul_text[]');
for (i=0; i<nBullet.length; i++)
{
nBulletField[i].value = nBullet[i].firstChild.data;
}
}

function init(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseBullets();
}
else {
alert('Error Admin.xml File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "Bullets.xml"+forceGET, true);
AdminRequest.send(null);
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:600px;margin:auto}
fieldset {background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Bullet Testing</legend>
<label>Bullet 1: <input name="bul_text[]" id="bul_text_0" type="text" size="80" maxlength="255" value="" /></label>
<label>Bullet 2: <input name="bul_text[]" id="bul_text_1" type="text" size="80" maxlength="255" value="" /></label>
<label>Bullet 3: <input name="bul_text[]" id="bul_text_2" type="text" size="80" maxlength="255" value="" /></label>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

Thanks, that was a big help. After looking at your code I changed the Javascript code that handles bullet fields to this:


// Update bullet point fields
bulletFields = document.getElementsByName ('bul_text[]');
for (thisBullet = 0; thisBullet < bulletFields.length; thisBullet++)
{
if (XMLRoot.getElementsByTagName ('bullet')[thisBullet].firstChild)
{
bulletFields [thisBullet].value =XMLRoot.getElementsByTagName('bullet')[thisBullet].firstChild.data;
}
}


and changed all my IDs back to ones that the validator wont complain about. My page validates as XHTML 1.1 again and the JavaScript seems to work fine in both FireFox and IE