Get values from Dynamically created textboxes and checkboxes linked to textbox - php

Question

I want to know how to capture values of dynamically created textboxes and checkboxes linked to each other.
My HTML elements would be like this:
<div class="data_class">
<input class="textbox_class" name="textbox[]" type="text" />
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
</div>
The checkboxes are linked to input with type="text"(i.e textbox)
Through JQuery i can clone the HTML elements in the "data_class" and append into it.
But while posting, how can we get the checkbox values related to each textbox.
i.e if i create 5 such elements like:
<div class="data_class">
<input class="textbox_class" name="textbox[]" type="text" value="A"/>
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
<input class="textbox_class" name="textbox[]" type="text" value="B"/>
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
<input class="textbox_class" name="textbox[]" type="text" value="C"/>
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
<input class="textbox_class" name="textbox[]" type="text" value="D"/>
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
<input class="textbox_class" name="textbox[]" type="text" value="E"/>
<input class="checkbox_class" name="checkbox[]" type="checkbox" />1
<input class="checkbox_class" name="checkbox[]" type="checkbox" />2
<input class="checkbox_class" name="checkbox[]" type="checkbox" />3
<input class="checkbox_class" name="checkbox[]" type="checkbox" />4
<input class="checkbox_class" name="checkbox[]" type="checkbox" />5
</div>
How to get values that are checked for textbox with value "A", "B", "C", "D", "E" seperatly???

Answer 1

What I would do is to group them by sets, meaning:
One set given A:
A textbox, and 1 or more checkboxes:
So I would do it create a name="" attribute that would group them accordingly. Example:
This would be the initial markup:
<form method="POST">
<div class="data_class">
<div class="fieldset" data-group="A">
<input class="textbox_class" name="form_values[A][textbox]" type="text" />
<input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="1" />1
<input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="2" />2
<input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="3" />3
<input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="4" />4
<input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="5" />5
</div>
</div>
<button type="button" id="spawn">Spawn More</button><br/>
<input type="submit" name="submit" />
</form>
Spawning other fieldsets:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#spawn').on('click', function(){
var $initial = $('div.fieldset:last').clone();
// or just increment a number instead
var next = String.fromCharCode($initial.attr('data-group').charCodeAt(0) + 1);
$initial.children('.textbox_class').attr('name', 'form_values['+next+'][textbox]');
$initial.children('.checkbox_class').attr('name', 'form_values['+next+'][checkbox][]');
$('.data_class').append('<div class="fieldset" data-group="'+next+'">'+$initial.html()+'</div>');
});
});
</script>
So in PHP, after submission, it would come up with something like this:
if(isset($_POST['submit'])) {
$values = $_POST['form_values'];
echo '<pre>';
print_r($values);
echo '</pre>';
}
Output:
Array
(
[A] => Array
(
[textbox] => test1
[checkbox] => Array
(
[0] => 1
[1] => 2
)
)
[B] => Array
(
[textbox] => test2
[checkbox] => Array
(
[0] => 4
[1] => 5
)
)
)
Sample Demo
Note: This is just an example, if you want a simple key, just use a numeric one instead.