<script>
$(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div><input type="text" name="product_name[]"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
}
});
$('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
You can get value of this fields in your PHP script by field name as you access normally but it return as an array after submitting form.
<?php
print '<pre>';
print_r($_REQUEST['product_name']);
print '</pre>';
//output of above script
Array
(
[0] => value of 1st index
[1] => value of 2nd index
[2] => value of 3rd index
)
?>