Get values from Dynamically created textboxes and checkboxes linked to textbox

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???

Put something that differentiates them into the name. You don't need an array of checkbox names, you need one single name that represents one set of options. You can use an array for all checkbox groups, but you should make the names for each set of options the same within that group — scrowler
– scrowler, Commented Jul 28, 2014 at 4:27

Kevin · Accepted Answer · 2014-07-28 05:06:37Z

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.

Thanks, it worked for with some. With come changes i was able to achieve

Collectives™ on Stack Overflow

Get values from Dynamically created textboxes and checkboxes linked to textbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related