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;
}


Comments

Post a Comment

If you Satisfied , Please Leave a comment

Popular posts from this blog

Call PHP Function In JavaScript Using Ajax

how to call php function from javascript function 1. create Folder on WWW Or htdocs (on your computer) 2. create index.php page on your folder and paste this code index.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <script> function addsearchproduct(x){   // this is JavaScript  function    $.ajax({   type: 'POST',   url: "function.php?f=phpFunction&p="+x,          // call php function , phpFunction=function Name , x= parameter     data: {},   success: function(data1){         alert(data1);   } });             } </script> <input type="button" value="call Php Function" onclick="addsearchproduct('pass value');"  />   3. create function.php  page on your folder and paste this code   function.php  <?php  if( function_exists ( $_GET [ 'f' ])) {  // get function name and parameter  $_GET [ 'f' ]( $
Read more

List of Post Category Wise in wordpress

for example show this type Category 1   post1    post 2    post3 category 2    post 1    post 2 Category 3   post1    post 2    post3  code : <?php // get all the categories from the database    $cats  =  get_categories (); // loop through the categries   foreach ( $cats  as  $cat ) {   // setup the cateogory ID    $cat_id =  $cat -> term_id ;   // Make a header for the cateogry    echo  "<h2>" . $cat -> name . "</h2>" ;   // create a custom wordpress query   query_posts ( "cat=$cat_id&post_per_page=100" );    // start the wordpress loop! if ( have_posts ()) : while ( have_posts ()) :  the_post ();  ?>    <?php  // create our link now that the post is setup  ?>    <a href=" <?php the_permalink (); ?> "> <?php the_title ();  ?> </a>  <?php  echo  '<hr/>' ;  ?>    <?php  endwhile; endif;    // done our wordpress loop. Will start again for each ca
Read more