Friday, August 24, 2012

add more input box in html




/**************** HTML Code **************************/
<tr>
<td width="30%" align="right"  valign="top"> <label class="mylbl">  Contact person  &nbsp;</label></td>
<td width="50%"  valign="top">
<table id="addmorecontact">
<tr>
<td><label class="mylbl">  Name &nbsp;</label> </td>
<td><label class="mylbl"> Designation &nbsp;</label> </td>
<!-- <td>  </td>-->
</tr>
<tr id="inputbox0">
    <td><input type="text" name="txtname[]" id="txtname0" style="width:200px" class="box " /> </td>
<td> <input type="text" name="txtdesig[]" id="txtdesig0" style="width:185px" class="box " /></td>
<td id="addmorebtn0">  <input type="button" value="ADD MORE" class="com_btn" onclick="return addmorecontact();"  /> </td>
</tr>
</table>
</td>
<td width="25%"  valign="bottom" align="left" id=" "></td>
</tr>

<input type="hidden" name="hidaddmorecp" id="hidaddmorecp" value="0"  />






/*************************** JAVASCRIPT Code *****************/
function addmorecontact(){
i=1; id=$('#hidaddmorecp').val();
if($('#txtname'+id).val()==''){ alert('Please enter name'); $('#txtname'+id).focus(); return false ; }
if($('#txtdesig'+id).val()==''){ alert('Please enter designation'); $('#txtdesig'+id).focus(); return false ; }
i=add(i,id);
$('#addmorebtn'+id).html("<input type='button' value='REMOVE' class='com_btn' onclick='return removemorecontact(\"inputbox"+id+"\");'  />");
$('#addmorecontact').append("<tr id='inputbox"+i+"'><td><input type='text' name='txtname[]' id='txtname"+i+"' style='width:200px' class='box ' /> </td><td> <input type='text' name='txtdesig[]' id='txtdesig"+i+"' style='width:185px' class='box ' /></td> <td id='addmorebtn"+i+"'>  <input type='button' value='ADD MORE' class='com_btn' onclick='return addmorecontact();'  /> </td></tr>");
 $('#hidaddmorecp').val(i)
}
function removemorecontact(x){
$('#'+x).remove();
}
function add(x,y){
z=parseInt(x)+parseInt(y);
return z;
}


No comments:

Post a Comment

If you Satisfied , Please Leave a comment