Forum Moderators: open
I am (attempting) to write a dynamic form generating class in php. One of the things it should do is generate select lists from the database.
I am testing a form I made, where there is an "add another" button which calls a javascript function which copies the innerHTML of a template div, which contains a select list and a text input field.
When the button is clicked, it pastes a copy into another DIV element, similar to something I saw on Quirksmode.org, 'Dynamic Forms' or whatever.
However, I have several selects, for example:
<select name = 'bob[0]' id = 'bob[0]'>
...
</select>
<select name = 'bob[1]' id = 'bob[1]'>
...
</select>
The problem is, whenever it copies in another set of select lists and input fields, it resets what all the other select lists and input fields selected values/filled in values were, and I don't know why! each time i make a copy, it is named bob[0], bob[1], etc, so the names/id's SHOULDNT be colliding, unless the browser is considering them the same element and internally ignoring the array part and in doing so, losing the selected info.
Note, this is NOT an issue of retaining selected values across page posts, that would be a simple php fix, this has to be javascript/dom related.
I have tried a modified version of the 'solution' to a similar problem as seen at [news.hping.org...] however the problem is that it is getting blanked out when the button is pressed, it doesnt seem to matter what i do to the select list itself.
Note: i have to use innerHTML because I don't know what sort of elements I want on the form, there may be 3 elements to copy, there may be 300, and I may or may not know their names, properties, etc, dont really want to write a 3000 line javascript catchall using DOM methods unless its absolutely necessary.
Sample Code (its part of a simple interface for adding weapon attributes to weapons to add to a ship object :P note that all form input elements are created initially are done by a one-liner function call in php, and additional copies of them are done with javascript, using an array of the same name as the copy template):
HTML:
<form name = "add_attribute_component_form" method = "post" action = "data_manipulator.php">
<fieldset>
<h3>Add Attribute to Component</h3>
<label>ship_component_component_id</label>
<select name = "ship_component_component_id" id = "ship_component_component_id" >
<option value = "" > </option>
<option value = "2" >Basic Coilgun</option>
<option value = "4" >Basic Disruptors</option>
<option value = "6" >Basic Fission Cannon</option>
<option value = "5" >Basic Fusion Cannon</option>
<option value = "7" >Basic Laser</option>
<option value = "3" >Basic Particle Beam</option>
<option value = "1" >Basic Railgun</option>
<option value = "18" >Spatial Rift Emitters</option>
</select>
<br><br>
<div id = "attribute_type_modify_fields" >
<label>attribute_type_type_id</label>
<select name = "attribute_type_type_id[]" id = "attribute_type_type_id[]" >
<option value = "" > </option>
<option value = "13" >base_cost_antimatter</option>
<option value = "10" >base_cost_credits</option>
<option value = "11" >base_cost_energy</option>
<option value = "12" >base_cost_minerals</option>
<option value = "15" >base_cost_personnel</option>
<option value = "3" >base_dmg_armour</option>
<option value = "4" >base_dmg_shield</option>
<option value = "5" >base_fatality</option>
<option value = "2" >base_hp</option>
<option value = "6" >base_research</option>
<option value = "1" >base_size</option>
</select>
<label>attribute_type_value</label><input class = "text_small" name = "attribute_type_value[]" id = "attribute_type_value[]" type = "text" >
<br><br>
</div>
<div id = "attribute_type_modify_add" ></div>
<input type = "button" value = "add another attribute" onclick = "clone('attribute_type_modify_fields', 'attribute_type_modify_add')" >
<input type = "hidden" name = "action" value = "add_attribute_component_form" >
<br><input type = "submit" name = "submit" value = "Insert">
</fieldset>
</form>
JAVASCRIPT:
var id = 1;
function clone(source, dest){
var contents = document.getElementById(source).innerHTML;
//replace [] with [0] for initial element
//because my php form maker thing will use [] by default
//as it wont necessarily count how many there are, etc.
document.getElementById(source).innerHTML = document.getElementById(source).innerHTML.replace(/\[\]/g,'[0]');
var result = document.getElementById(dest);
//add in the ID for all new elements, [0], [1], etc
result.innerHTML += "\n"+contents.replace(/\[\]/g,'['+id+']');
id++;
}
When you make a selection and type a value into the form field and click the add another field button thing, it erases what you just typed in, even if you just filled in 7 and realize that you need 8 afterall, poof! all gone...no good!
If someone could solve this or tell me a different way to go about this that doesnt trigger this issue that would rock.
I can't believe nobody apparently has had this issue as i cant find it anywhere.
window.onload = function(){
var sels = document.getElementsByTagName('select');
for( var i = 0; i < sels.length; i++ ){
sels[i].onchange = function(){selectOnChange(this);}
}
}
//make sure selects dont lose their value if dom tree functions are invoked on them
function selectOnChange(sel) {
for( var i = 0; i < sel.options.length; i++ ){
if( i == sel.selectedIndex ){
sel.options[i].selected=true;
alert(sel.options[i+1].selected);
}
else{
sel.options[i].selected=false;
}
}
}
