navaswd navaswd - 26 days ago 8
CSS Question

how to display multiple dynamically generated textbox values into an array

I have multiple dynamically generated text box.Here When I click the add button in the row of text box it will dynamically generate the text box row and get the values from the text box. Here how can i get the value from these row or array of text box using php.



$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name2[]" value=""/><input type="text" name="field_name2[]" value=""/><input type="text" name="field_name3[]" value=""/><input type="text" name="field_name4[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="https://cdn0.iconfinder.com/data/icons/round-ui-icons/512/close_red.png" width="30" height="30"/></a></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});

input[type="text"]{height:20px; vertical-align:top;}
.field_wrapper div{ margin-bottom:10px;}
.add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
.remove_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" action="" method="post">
<div class="field_wrapper">
<div>
<input type="text" name="field_name1[]" value=""/>
<input type="text" name="field_name2[]" value=""/>
<input type="text" name="field_name3[]" value=""/>
<input type="text" name="field_name4[]" value=""/>
<a href="javascript:void(0);" class="add_button" title="Add field"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678092-sign-add-128.png" width="30" height="30"/></a>
</div>
</div>
<input type="submit" name="submit" value="SUBMIT"/>
</form>





Here i get the values using php but it shows only the single text box value.

<?php
if(isset($_REQUEST['submit'])){
$field_values_array = $_REQUEST['field_name'];

print '<pre>';
print_r($field_values_array);
print '</pre>';

foreach($field_values_array as $value){
//your database query goes here
}
}
?>

Answer Source

Try this. You have to iterate through your posted fields

if(isset($_REQUEST['submit']))
{

    for($i=1; $i<=4; $i++) //changes number of count as per fields in form
    {

        $field_values_array = $_REQUEST['field_name'.$i];

        print '<pre>';
        print_r($field_values_array);
        print '</pre>';

        foreach($field_values_array as $value){
            //your database query goes here
        }

    }            
}