Taking input in PHP from checkbox in loop

Question

<?php

if(isset($_POST['submit'])){
    $field_Values_array = $_POST['field_name'];
    $pass_array = $_POST['class'];

    $sg = "";

    $len1 = count($field_Values_array);
    $class = implode(", ",$pass_array);

    $x=0;
    while($x<$len1){
        $sg = $sg."Book - ".$field_Values_array[$x]." Set - ".$class."<br>";
        $x++;
    }

    echo $sg;

    print '<pre>' ; print_r($field_Values_array); print '</pre>';
    print '<pre>' ; print_r($pass_array); print '</pre>';
}

?>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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_name[]" value=""/> <input type="checkbox" name="class[]" value="A" />A <input type="checkbox" name="class[]" value="B" />B <input type="checkbox" name="class[]" value="C" />C <input type="checkbox" name="class[]" value="1" />1 <input type="checkbox" name="class[]" value="2" />2 <input type="checkbox" name="class[]" value="3" />3 <input type="checkbox" name="class[]" value="4" />4 <input type="checkbox" name="class[]" value="5" />5 <input type="checkbox" name="class[]" value="6" />6 <input type="checkbox" name="class[]" value="7" />7 <input type="checkbox" name="class[]" value="8" />8 <a href="javascript:void(0);" class="remove_button"><img src="remove.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1

    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
</head>
<body>
<div class="container">
    <form action="index.php" method="post">
        <div class="field_wrapper">
            <div>
                <input type="text" readonly value="Book Name"/>
                <input type="text" readonly value="Book Set"/>
            </div>
            <div>
                <input type="text" name="field_name[]" value=""/>
                <input type="checkbox" name="class[]" value="A" />A
                <input type="checkbox" name="class[]" value="B" />B
                <input type="checkbox" name="class[]" value="C" />C
                <input type="checkbox" name="class[]" value="1" />1
                <input type="checkbox" name="class[]" value="2" />2
                <input type="checkbox" name="class[]" value="3" />3
                <input type="checkbox" name="class[]" value="4" />4
                <input type="checkbox" name="class[]" value="5" />5
                <input type="checkbox" name="class[]" value="6" />6
                <input type="checkbox" name="class[]" value="7" />7
                <input type="checkbox" name="class[]" value="8" />8
                <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add.png"/></a>
            </div>
        </div><br><input type="submit" name="submit" value="Submit">
    </form>
</div>
</body>
</html>

I want my code to work as if in the first input field I write english and select A, B, C and then press plus sign and add another pair of same fields then I write Hindi and choose 1 to 8 and press submit. The output should be like Book - English and Set - A,B,C Book - Hindi and Set - 1,2,3,4,5,6,7,8

but I am not able to get this result.

Does this answer your question? [How can I group form elements](https://stackoverflow.com/questions/5802057/how-can-i-group-form-elements) — M. Eriksson, Dec 20 '19 at 09:59
@MagnusEriksson it would be better if you could lend some help with the code — , Dec 20 '19 at 10:00
I found a duplicate explaining it better. Read the answer on that one and you should get the idea. — M. Eriksson, Dec 20 '19 at 10:00

Ajith · Accepted Answer · 2019-12-20T10:31:27.053

Can you try the below code, I hope this will helps you

<?php

if(isset($_POST['submit'])){
    $field_Values_array = $_POST['field_name'];
    $pass_array = $_POST['class'];

    $sg = "";

    $len1 = count($field_Values_array);
    $class = implode(", ",$pass_array);

    $x=0;
    while($x<$len1){
        $sg = $sg."Book - ".$field_Values_array[$x]." Set - ".implode(", ",$pass_array[$x])."<br>";
        $x++;
    }

    echo $sg;

    print '<pre>' ; print_r($field_Values_array); print '</pre>';
    print '<pre>' ; print_r($pass_array); print '</pre>';
}

?>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php 
$index = 0;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var index = parseInt('<?php echo $index; ?>');
$(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_name[indexed]" value=""/> <input type="checkbox" name="class[indexed][]" value="A" />A <input type="checkbox" name="class[indexed][]" value="B" />B <input type="checkbox" name="class[indexed][]" value="C" />C <input type="checkbox" name="class[indexed][]" value="1" />1 <input type="checkbox" name="class[indexed][]" value="2" />2 <input type="checkbox" name="class[indexed][]" value="3" />3 <input type="checkbox" name="class[indexed][]" value="4" />4 <input type="checkbox" name="class[indexed][]" value="5" />5 <input type="checkbox" name="class[indexed][]" value="6" />6 <input type="checkbox" name="class[indexed][]" value="7" />7 <input type="checkbox" name="class[indexed][]" value="8" />8 <a href="javascript:void(0);" class="remove_button"><img src="remove.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1

    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        index++;

        newHTML = fieldHTML.replace(/indexed/g, index);



        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(newHTML); //Add field html
        }
    });

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
</head>
<body>
<div class="container">
    <form action="demos.php" method="post">
        <div class="field_wrapper">
            <div>
                <input type="text" readonly value="Book Name"/>
                <input type="text" readonly value="Book Set"/>
            </div>
            <div>
                <input type="text" name="field_name[<?php echo $index; ?>]" value=""/>
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="A" />A
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="B" />B
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="C" />C
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="1" />1
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="2" />2
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="3" />3
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="4" />4
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="5" />5
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="6" />6
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="7" />7
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="8" />8
                <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add.png"/></a>
            </div>
        </div><br><input type="submit" name="submit" value="Submit">
    </form>
</div>
</body>
</html>

Screenshot of result is given below

this is not working echo $sg; print '
' ; print_r($field_Values_array); print '
'; print '
' ; print_r($pass_array); print '
'; — , Dec 20 '19 at 10:09
Why are you setting `index` using PHP? Why not just `var index = 0;`? The same goes for the form, why not just write: `field_name[0]` and `class[0][]`? — M. Eriksson, Dec 20 '19 at 10:09
@TabishTanseef I have fixed 3 rd row issue now, Please see the edited code — Ajith, Dec 20 '19 at 10:16
yes its working now just one more help can you help me print it in this format echo $sg; { Book - English Set-A,B,C Book - Kavya Set-1,2,3,4 Book - Maths Set-6,7,8 } etc.. — , Dec 20 '19 at 10:27
@TabishTanseef Please check the while loop now, I have fixed the printing issue also . Please upvote and accept if it helps you — Ajith, Dec 20 '19 at 10:32

Taking input in PHP from checkbox in loop

1 Answers1