Add More fields to a form using jquery/javascript in PHP

How can I make a form in php that allows the user to add additional form fields if they need them | Allow to add more fields to form | Inserting multiple form fields with same name | Dynamically Add Input Fields And Submit To Database With jQuery and PHP and fetch values of these fields on updation | Add more input fields to PHP form | Step by step example of add more same fields in PHP

 

Step 1

Add min js in your header or proper location before using javascript code like:-

jquery-1.9.1.min.js OR higher

Step 2

write javascript/jquery code for add fields when click on plus(+) button and remove fields when click on Minus(-) button

Step 3

Add one row of fields between form. You can add more fields according to you

// query for fetch record on update time
$sql_desc="select po_item,po_qty ,po_rate ,po_vat ,po_cst,po_s_tax,po_total from "._DB_PREFIX."po_desc where po_id='$id'";
$qry0=mysql_query($sql_desc);
//end query for fetch record on update time

// query for fetch VAT amount and description for different goods/item
$sql_vat="select tax_amount,description from "._DB_PREFIX."tax where tax_type='VAT' and status='1'";

$qry1=mysql_query($sql_vat);
// end query for fetch VAT amount and description for different

// query for fetch CST amount and description for different goods/item
$sql_cst="select tax_amount,description from "._DB_PREFIX."tax where tax_type='CST' and status='1'";

$qry2=mysql_query($sql_cst);
// end query for fetch CST amount and description for different goods/item

// query for fetch service tax amount and description for different goods/item
$sql_ser_tax="select tax_amount,description from "._DB_PREFIX."tax where tax_type='Service Tax' and status='1'";

$qry3=mysql_query($sql_ser_tax);
// end query for fetch Service Tax amount and description for different goods/item

 $l=0;
while($row1=mysql_fetch_assoc($qry0)){

$sql_vat="select tax_amount,description from "._DB_PREFIX."tax where tax_type='VAT' and status='1'";
$qry1=mysql_query($sql_vat);

$sql_cst="select tax_amount,description from "._DB_PREFIX."tax where tax_type='CST' and status='1'";
$qry2=mysql_query($sql_cst);

$sql_ser_tax="select tax_amount,description from "._DB_PREFIX."tax where tax_type='Service Tax' and status='1'";
$qry3=mysql_query($sql_ser_tax);

//dynamically draw VAT option in dropdown
$vatOption1='';
while($row_pr_vat=mysql_fetch_assoc($qry1)){
//echo 'gvhfg';
extract($row_pr_vat);

$vatOption1 .= " if ($row1['po_vat'] == $tax_amount)
{ $status;
$vatOption1 .= " selected";
}
$vatOption1 .= ">$tax_amount";
}
// end dynamically draw VAT option in dropdown

//dynamically draw CST option in dropdown
$cstOption1='';

while($row_pr_cst=mysql_fetch_assoc($qry2)){

extract($row_pr_cst);

$cstOption1 .= " if ($row1['po_cst'] == $tax_amount)
{ //echo $status;
$cstOption1 .= " selected";
}
$cstOption1 .= ">$tax_amount";
}

// End dynamically draw CST option in dropdown



//Dynamically draw service tax option in dropdown
$ser_taxOption1='';
while($row_pr_stax=mysql_fetch_assoc($qry3)){

extract($row_pr_stax);

$ser_taxOption1 .= " if ($row1['po_s_tax'] == $tax_amount)
{ //echo $status;
$ser_taxOption1 .= " selected";
}
$ser_taxOption1 .= ">$tax_amount";
} 
//End dynamically draw service tax option in dropdown list
//for update records
if($id!=''){ ?> <br /> <br /> <label for="p_scnts"><input class="input-type-js input-type2" id="txt_desc_<?php echo $l;?>" name="txt_desc[]" placeholder="Description" size="20" style="width: 145px;" type="text" value="<?php echo $row1['po_item'];?>" /></label><br /> <label for="p_scnts"><input class="input-type-js input-type" id="txt_qty_<?php echo $l;?>" name="txt_qty[]" onkeypress="return isNumber(event)" placeholder="Qty" style="width: 29px;" type="text" value="<?php echo $row1['po_qty'];?>" /></label><br /> <label for="p_scnts"><input class="input-type-js input-type" id="txt_rate_<?php echo $l;?>" name="txt_rate[]" onkeypress="return isNumberKey(this.value);" placeholder="Rate" style="size: 8px;" type="text" value="<?php echo $row1['po_rate'];?>" /></label><br /> <br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_vat_<?php echo $l;?>" name="sel_vat[]"><option value="0.00">VAT</option> echo $vatOption1;?> </select></label><br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_cst_<?php echo $l;?>" name="sel_cst[]"><option value="0.00">CST</option> </select></label><br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_service_tax_<?php echo $l;?>" name="sel_service_tax[]"><option value="0.00">Service Tax</option> </select></label><br /> <label for="p_scnts"><input class="input-type-net input-type" id="txt_total_<?php echo $l;?>" name="txt_total[]" placeholder="Total" readonly="readonly" size="8" type="text" value="<?php echo $row1['po_total'];?>" /></label><br /> <br /> <br /> <br /> <br /> <br /> }
///end update records
else
{ ?>  //for add new fields
<br /> <label for="p_scnts"><input class="input-type-js input-type2" id="txt_desc_0" name="txt_desc[]" placeholder="Description" size="20" style="width: 145px;" type="text" value="" /></label><br /> <label for="p_scnts"><input class="input-type-js input-type" id="txt_qty_0" name="txt_qty[]" onkeypress="return isNumber(event)" placeholder="Qty" style="width: 29px;" type="text" value="" /></label><br /> <label for="p_scnts"><input class="input-type-js input-type" id="txt_rate_0" name="txt_rate[]" onkeypress="return isNumberKey(this.value);" placeholder="Rate" style="size: 8px;" type="text" value="" /></label><br /> <br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_vat_0" name="sel_vat[]" value=""><option value="">VAT</option> </select></label><br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_cst_0" name="sel_cst[]" value=""><option value="">CST</option> </select></label><br /> <label for="p_scnts"><select class="input-type-js input-type" id="sel_service_tax_0" name="sel_service_tax[]" value=""><option value="">Service Tax</option> </select></label><br /> <label for="p_scnts"><input class="input-type-net input-type" id="txt_total_0" name="txt_total[]" placeholder="Total" readonly="readonly" size="8" type="text" value="" /></label><br /> <br /> <br /> <br /> <br />