Javascript - formular - nested dynamic appendchild functions

I have a form which changes the inputfields depending on a radio-button.

for text there appears a textbox for textarea there appear additional 2 fields for cols And rows for select, checkbox and radio there appear additional fields with appendchild

have a look here: http://joomla.byethost16.com/php.php

Now what i want is to let the user add more params, param2, param3, etc.

Unfortunately i made the js functions that trigger the fields according to the radio-button like this

    function textarea(){    
if (document.getElementById('option2').checked = true){
    document.getElementById('feld').style.display = '';
        document.getElementById('feld2').style.display = '';
        document.getElementById('feld4').style.display = 'none';
}}

So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.

all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too

    <td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields"  />

<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a>  <a href=# onclick='reset()'>reset</a></div>
</div>

<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>


</td>
</tr>

How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params? For the complete code please go here and view source: http://joomla.byethost16.com/php.php

thx so much for help on this

ansaurus

tags:

views:

answers:

Javascript - formular - nested dynamic appendchild functions

related questions