Question

I want to implement dynamic select box. I have do it success fully, but when my page is submitted I the value is not there
See my code below

<select name="frm_child" id="frm_child" style="width:50px;" onchange="addFLd(this.value)" >
         <option value="0" >0</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
            <option value="4" >4</option>
            <option value="5" >5</option>
            <option value="6" >6</option>
        </select

Dynamic field display in childDynamic div. Which is inside the form tag? But when I submit my form, I can’t see the result from select box. See my js code below

<div id="childDynamic" style="display:none;">
      <input type="text" name="child1" value="" />
      </div>

My JavaScript code id

<script type="text/JavaScript">
Function addFLd(val){
var d=document.getElementById("childDynamic");
d.style.display='block';
d.innerHTML="";
    if(val!=0){

            d.innerHTML="<b>Please specify the ages of children:</b><br><br>";
            for(var i=1;i<=val;i++){
            if(i%2!=0 && i!=1){
            d.innerHTML+="<br><br>";
            }
            var name='child'+i;
            d.innerHTML+="&nbsp;&nbsp;Child "+i+": ";
            d.innerHTML+="&nbsp;<select name='"+name+"' id='"+name+"'><option value=''>--select--</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option>";

            d.innerHTML+="</select>";
            }
            d.innerHTML+="<br><br>";
             document.getElementById('childDynamic').appendChild(d);

                }
}
</script>

Does anyone know how I add dynamic fields and get the values in action with the form elements?

Answer 1

Perhaps a better alternative is to include the form inputs in the original markup and rather than appending them if necessary, simply enable them by removing the disabled="disabled" attribute and also removing display:none style to reveal them on the page.

I would think you’d get more luck with cross browser support, as some don’t submit dynamically added form elements.

Alternatively, I recommend using a javascript framework to do the appending, such as jQuery.

See this link for details on how you might append form elements to a page:

http://api.jquery.com/append/