Thursday, 21 June 2012

working tutorial on "Adding new input field dynamiclly using Javascript DOM"


##################
#### Dpz code #####
##################







<script type="text/javascript">
fields1=0;

function createInput1(){
    if(fields1!=10){
var input = document.createElement('input'); <1-- it creates input Element -->
input.type = 'text';
input.value = '';
input.name='item[]';  <!--Put the input field name according to your requirement -->

document.getElementById("text1").appendChild(input); <!-- the DIV ID or any ID where u want your input field will be placed comes here.. -->
fields1 += 1;}
 else { 
   
document.getElementById("txt1").innerHTML += "<br />Maximum 10 fields allowed."; <!--Use this else condition only if u want to limit/stop adding new fields -->
document.form1.add1.disabled=true;
}


}
</script>


<form name="form1" id="form1" action="" method="post"><table align="center">
<tr><td>Country :</td><td><input type="text" name="item[]"/></td></tr>

<tr><td></td><td><div id="text1"  style="width:100px" align="center"></div></td></tr>
<tr><td colspan="2"><div id="txt1"  style="width:200px" align="center"></div></td></tr>

<tr><td><input name="submit" type="submit" value="ADD" /></td><td><input name="add1" type="button" value="Add More Country" onClick="createInput1();" /></td></tr> <!--this will trigger createInput1 function when the button is clicked -->
</table>

</form>

No comments:

Post a Comment