Dynamically Add/Remove Any number of Textboxes

<?php $max_no_boxes=10; ?>
 <script type="text/javascript">
 function addnames() {
 document.getElementById("totalnames").value	=
 Number(document.getElementById("totalnames").value) +	Number(1);
 if(Number(document.getElementById("totalnames").value)>=
 Number(<?php echo $max_no_boxes ?>)){
 document.getElementById("totalnames").value=<?php echo $max_no_boxes ?>;
 document.getElementById("nameButton").style.display="none";
 }
 document.getElementById("name"+document.getElementById("totalnames").value)
 .style.display="block";
 }
 function removenames() {
 document.getElementById("name"+document.getElementById("totalnames").
 value).style.display="none";
 document.getElementById("totalnames").value	=
 Number(document.getElementById("totalnames").value) -	Number(1);
 if(Number(document.getElementById("totalnames").value)<
 Number(<?php echo $max_no_boxes ?>))
 document.getElementById("nameButton").style.display="block";
 }
 </script>

 <table>
 <tr>
 <td valign="top">Name</td>
 <td valign="top">
 <div class="project_right">
 <?php for($i=2;$i<=$max_no_boxes;$i++) { 	$nameValue	=	"name".$i; ?>
  <div style="display:<?php echo $totalnames>= $i ?"block":"none"; ?>"
  id="name<?= $i ?>">
 : <input type="text" name="name<?= $i ?>"  class="projectText"
 value="<?php echo $$nameValue ?>">
 <a href="javascript:return false;" onClick="javascript:removenames();">Remove</a>
 </div>
 <?php } ?>
 <div style="width:175px;; clear: left; float:left">:
 <input type="text" name="name1" class="projectText"
 value="<?php echo $name1 ; ?>">
 </div>
 <div style="width:20px; clear: none; float:left">
 <a id="nameButton" href="javascript:return false;"
 onClick="javascript:addnames();">Add</a>
 </div>
 <input type="hidden" id="totalnames"  name="totalnames"
 value="<?php echo $totalnames==""?1:$totalnames; ?>" />
 </div>
 </td>
 </tr>
 </table>

Leave a Reply

Your email address will not be published. Required fields are marked *