...

View Full Version : Cloning and retrieving form elements information



kamo
06-12-2007, 10:41 PM
>> Hi!

I've been working on a javascript/php solution to enter multiple plant species on PgSQL database based on a form that allows to clone elements, specially dropdowns with species from the database, similar to this:


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

<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

<input name="cd" value="title" />

<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br /><br />

<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2

</div>

<form method="post" action="/cgi-bin/show_params.cgi">

<span id="writeroot"></span>

<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />

</form>

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);
}

window.onload = moreFields;

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);
}

window.onload = moreFields;

<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />


I'm having some problems in gathering all the variable information in a way that allows a php script to enter all the values into the database. The problem is the variable number of elements in the form, so far I've only worked on php form submissions with a constant number of inputs.

Any suggestions to deal with this problem?

::Thanks in advance::kamo::



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum