CODEWITHSUNDEEP
javascriptphphtmlformscheckbox
YaddyVirus
YaddyVirus

Reputation: 301

How to read multiple checkboxes(and data associated with it)?

I have a form with multiple checkboxes and each checkbox as an input field associated with it that'll activate once you check the checkbox.

I've got the frontend working just fine, but I was wondering how can I read in my PHP which checkboxes were checked along with their respective input fields (and some have a radio button too in addition to the input field)

Here's what each individual checkbox in my form looks like:

 <!-- Option1 -->
              <div class="form-row">
                <div class="form-group col-md-8">
                  <div class="form-check">
                    <input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
                    <label class="form-check-label" for="c1">
                      Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
                    </label>
                  </div>
                </div>
                  <div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
                    <!-- <label for="qtcounter">Quantity:</label> -->
                    <div class="input-group" id="qtcounter">
                      <input type="button" value="-" class="button-minus" data-field="quantity">
                      <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
                      <input type="button" value="+" class="button-plus" data-field="quantity">
                    </div>
                  </div>
              </div>
              <!-- Option 1 ends -->

I haven't wrapped my head around the PHP yet but previously to read multiple checkboxes I put them all in an array in the name field and read that array in PHP. However, that was without the added complication of each checkbox having input field.

Does anyone have any idea how to do this?

Upvotes: 1

Views: 283

Answers (1)

Arnold Daniels
Arnold Daniels

Reputation: 16573

You want to use an associative array for both the inputs and the checkboxes.

<!-- Option1 -->
<div class="form-row">
  <div class="form-group col-md-8">
    <div class="form-check">
      <input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
      <label class="form-check-label" for="c1">
        Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
      </label>
    </div>
  </div>
    <div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
      <!-- <label for="qtcounter">Quantity:</label> -->
      <div class="input-group" id="qtcounter">
        <input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
        <input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
        <input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
      </div>
    </div>
</div>
<!-- Option 1 ends -->

For option 2 use items[2][chosen] and items[2][quantity], etc.

Note that must specify the index and can't use []. Otherwise, the index of quantity will not match the chosen item.

In php you can loop through the items and ignore the items that aren't chosen.

foreach ($_POST['items'] as $item) {
    if (!isset($item['chosen'])) continue; // Skip items that aren't chosen.

    echo $item['quantity'] . ' ' . $item['chosen'] . "\n"; 
}

Upvotes: 3

Related Questions