Ideas needed: Making a functional interface :-)

[eatmypiano]

Last time I was stuck for ideas, I posted a message here and got some fantastic replies - so I'm here again!

I have a requirement to build an XML file. The file is a configuration file and in itself is quite simple. It looks like this

<Field name="Some Field">
<Encoding>LTE</Encoding>
<ConfigByteCode>1</ConfigByteCode>
<LengthFieldSize>2</LengthFieldSize>
<StringValue nullTerminated="true" size="variable">Test</StringValue>
</Field>

In the configuration file, there could be one of these - or 5 or 50. The average end user who would be using my program would have a text description for "ConfigByteCode" and a value to assign to in (StringValue).

Building the XML file is easy - The different types of ConfigByteCode and the other values would be stored in a MySQL database so that bit is easy. My idea is to have a pop-up menu populated with

<option value='$cbc'>$cbc_text</option>

where $cbc is the configByteCode and $cbc_text is the text description of what that CBC is for, and a text field. The user picks an item from the menu and enters a value in the text field.

This is the bit I need help with - the user then clicks a + button and another pop up menu and text field appear below the current one. They choose and item, fill in the text field, click the + sign and another pop up and text field appear. And so on, until they've added everything they need to add.

Is that acheivable? I can do it by adding 50 pop up and text field pairs in DIVs and showing them with JavaScript but I'm wondering if there's a more efficient way that I haven't discovered yet.

Thanks for any advice

Steve

[sneakyimp]

Technically, i think javascript is the best way to do what you are talking about. I know that there are ways to do 'addNode' and stuff in html which is supposed to be more exact/proficient/proper (or maybe not 'proper' but javascript snobs insist it is). i've had some luck doing that.

assume you have a DIV tag with id="tha_div" where you want all your additional select objects to go. you can add to the innerHTML attribute of this div to add fields.

<script language="Javascript">
  function addField() {
    el = document.getElementById('tha_div');
    newHTML = ' <select name="cbc[]"><option value="foo">bar</option></select>';
    el.innerHTML += newHTML;
  }
</script>
<div id="tha_div">
 <select name="cbc[]">
  <option value="foo">bar</option>
 </select>
</div>
<a href="javascript:void(0);" onClick="addField();">add a field</a>

[eatmypiano]

Hah! That's perfect. Never thought of doing it that way (PHP is my forte, not JavaScript).

Thanks - you've saved me a lot of work :-)

Steve