Dynamic field entry and document.getElement

[markhill]

Firstly, apologies for the length of this script.

I've been messing with this for a number of days and can make no headway (html and javascript are not my areas).

This script functions well enough, but my problem is in populating the fields with an array of information I have stored in a database. I want to use the init() function to generate the blank fields and then run through it with my database values, and terminating when null is reached. I don't seem to be able to access the values, i.e student name, once the form object has been cloned, and this is clearly due to my ignorance of DOM and javascript.

Once populated the user will be able to generate more fields, which I'd like to be able to submit back to the database.


What is the correct syntax for reading and writing values stored in the <div tag?


Thanks for any help!

Mark.



<script language="javascript">
<!--

var counter = 0;

function moreFields()
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

function init()
{
moreFields();
}

// -->
</script>


</head>


<div id="readroot" style="display: none">

<input type="button" value="Remove student" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
"><br><br>

<table border="0" width="80%">
<tr>
<td><font color="navy" face=Arial size=2>
Student Name:
</font></td>
<td><input type="text" size="40" name="tel" value="Last, First"></td>
</tr>
<tr>
<td><font color="navy" face=Arial size=2>
Supervisor status:
</font></td>
<td>
<select name="supervisor">
<option selected>Principal</option>

<!-- <option>Principal</option> -->
<option>Second</option>
<option>Third</option>
<option>Adviser</option>
</select>


</td>
</tr>

<tr>
<td><font color="navy" face=Arial size=2>
Thesis title:
</font></td>
<td><input type="text" size="40" name="tel"></td>
</tr>

<tr>
<td><font color="navy" face=Arial size=2>
Institution:
</font></td>
<td><input type="text" size="40" name="tel" value="Northumbria University"></td>
</tr>


<tr><td><!--DWLayoutEmptyCell-->&nbsp;</td></tr>
<tr><td><!--DWLayoutEmptyCell-->&nbsp;</td></tr>
</table>
</div>

<form method=post action="http://hortus-mechanicus.net/show_params.cgi">
<span id="writeroot"></span>

<input type="button" value="Add a student" onClick="moreFields()">
</form>

[felgall]

Neither HTML or Javascript provide access to read or write databases. How you do it depends on which server side scripting language you are using since that is what can access the database.

[rlemon]

for a form element input

element.value = "";

for a div tag

element.innerHTML = "some html"; <-- this will clear all html in the tag first

that what you needed?

[markhill]

Wow, thanks for the quick responses here guys!

I'm using profile manager which is a .cgi based package

By the time I arrive at the page with this script, I can generate an array (%%field1%%, %%field2) etc.

What I wanted was to be able to run through this array and where populated allocate to the fields, generate the next set and repeat until null. It's at this point the user can add another set of fields.

It seems to me that I need to be able to access the student name, and thesis etc. elements of the html in order to do it, and when a submit button is pressed I can %%session%% all the fields back to the database.


element.innerHTML = "some html";


Sorry for appearing dopey, if I wanted within init() function to access student name in the 4th table, what would I type??

Part of me suspects (searched forum) that there maybe a problem with the script I'm using in accessing elements?

Really appreciate it guys,

Mark.

[rlemon]

pul the database value with a query then place it in a string

and if you are using php ....

element.innerHTML = '<? echo $string; ?>';