How to get value of selected checkbox using php?

JennaM252ller
October 12, 2022
251 views
2 votes
3 Answers

I need help with collecting all the selected checkbox options from Special Orders and display it as text strings inside the modal. The checked options should be separated by commas.

I’m clearly new to JS, I have tried to look for solutions but I can’t seem comprehend them at all and have been stucked in this part for ages.

the code is here…

<form action="save_schedule.php" method="post" id="schedule-form">
  <input type="hidden" name="id" value="">
  <div class="form-group mb-2">
    <label for="title" class="control-label">Title</label>
    <input type="text" class="form-control" placeholder="Title" name="title" id="title" required>
  </div>
  <div class="form-group mb-2">
    <label for="recipient" class="control-label">Name of the Recipient</label>
    <input type="text" class="form-control" placeholder="recipient" name="recipient" id="recipient" required>
  </div>
  <div class="form-group mb-2">
    <label for="phone" class="control-label">Phone Number</label>
    <input type="text" class="form-control" placeholder="Username" placeholder="Phone number" name="phone" id="phone" required>
  </div>
  <div class="form-group mb-6">
    <label for="orders" class="control-label">Special Orders</label>
    <div class="form-group row">
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">Pancit
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Spaghetti
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Carbonara
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Palabok 
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Baked Mac
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Maja
          </label>
        </div>
      </div>
      <div class="col-sm-6">
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input">
          Banana Sliced
        </label>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input">
          Fish Fillet
        </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Chicken Curry
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Kaldereta
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Menudo 
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Chopsuey
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
            Grilled Liempo
          </label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-check">
           <label class="form-check-label">
             <input type="checkbox" class="form-check-input">
             Beef Teriyaki
           </label>
         </div>
       </div>
     </div>   
                                                                                 
     <div class="form-group mb-2">
       <label for="description" class="control-label">Notes</label>
       <textarea class="form-control" rows="4" name="description" placeholder="Type the description" id="description" required></textarea>
     </div>
     <div class="form-group mb-2">
       <label for="address" class="control-label">Delivery Address</label>                                          
       <input type="text" class="form-control" placeholder="House #, Street, City" aria-label="Username" name="address" id="address" required>
     </div>
     <div class="form-group mb-2">
       <label for="start_datetime" class="control-label">Delivery Date</label>
       <input type="datetime-local" class="form-control" name="start_datetime" id="start_datetime" required>
     </div>
</form>

<!-- Event Details Modal -->
<div class="modal fade" tabindex="-1" data-bs-backdrop="static" id="event-details-modal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-0">
      <div class="modal-header rounded-0">
        <h5 class="modal-title">Order Details</h5>
      </div>
      <div class="modal-body rounded-0">
        <div class="container-fluid">
          <dl>
            <dt class="text-muted">Title</dt>
            <dd id="title" class="fw-bold fs-4"></dd>
            <dt class="text-muted">Name of the Recipient</dt>
            <dd id="recipient" class=""></dd>
            <dt class="text-muted">Phone Number</dt>
            <dd id="phone" class=""></dd>
            <dt class="text-muted">Special Orders</dt>
            <dd id="" class=""></dd>
            <dt class="text-muted">Notes</dt>
            <dd id="description" class=""></dd>
            <dt class="text-muted">Delivery Address</dt>
            <dd id="address" class=""></dd>
            <dt class="text-muted">Delivery Date</dt>
            <dd id="start" class=""></dd>
          </dl>
        </div>
      </div>
      <div class="modal-footer rounded-0">
        <div class="text-end">
          <button type="button" class="btn btn-primary mr-2" id="edit" data-id="">Edit</button>
          <button type="button" class="btn btn-danger" id="delete" data-id="">Delete</button>
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Event Details Modal -->

save_schedule.php


require_once('../config/connection.php');

if($_SERVER['REQUEST_METHOD'] !='POST') {
    echo "<script> alert('Error: No data to save.'); location.replace('./') </script>";
    $con->close();
    exit;
}
extract($_POST);
$allday = isset($allday);

if(empty($id)){
    $sql = "INSERT INTO `calendar` (`title`,`recipient`,`phone`,`description`,`address`,`start_datetime`) VALUES ('$title','$recipient','$phone','$description','$address','$start_datetime')";
}else{
    $sql = "UPDATE `calendar` set `title` = '{$title}', `recipient` = '{$recipient}', `phone` = '{$phone}',`description` = '{$description}',`address` = '{$address}',`start_datetime` = '{$start_datetime}' where `id` = '{$id}'";
}
$save = $con->query($sql);
if($save){
    echo "<script> alert('Schedule Successfully Saved.'); location.replace('./special-orders.php') </script>";
}else{
    echo "<pre>";
    echo "An Error occured.<br>";
    echo "Error: ".$con->error."<br>";
    echo "SQL: ".$sql."<br>";
    echo "</pre>";
}
$con->close();

script.js

    var calendar;
    var Calendar = FullCalendar.Calendar;
    var events = [];
    $(function() {
        if (!!scheds) {
            Object.keys(scheds).map(k => {
                var row = scheds[k]
                events.push({ id: row.id, title: row.title, start: row.start_datetime });
            })
        }
        var date = new Date()
        var d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear()

        calendar = new Calendar(document.getElementById('calendar'), {
            headerToolbar: {
                left: 'prev,next today',
                right: 'dayGridMonth,dayGridWeek,list',
                center: 'title',
            },
            selectable: true,
            themeSystem: 'bootstrap',
            //Random default events
            events: events,
            eventClick: function(info) {
                var _details = $('#event-details-modal')
                var id = info.event.id
                if (!!scheds[id]) {
                    _details.find('#title').text(scheds[id].title)
                    _details.find('#recipient').text(scheds[id].recipient)
                    _details.find('#phone').text(scheds[id].phone)
                    _details.find('#description').text(scheds[id].description)
                    _details.find('#address').text(scheds[id].address)
                    _details.find('#start').text(scheds[id].sdate)
                    
                    _details.find('#edit,#delete').attr('data-id', id)
                    _details.modal('show')
                } else {
                    alert("Event is undefined");
                }
            },
            eventDidMount: function(info) {
                // Do Something after events mounted
            },
            editable: true
        });

        calendar.render();

        // Form reset listener
        $('#schedule-form').on('reset', function() {
            $(this).find('input:hidden').val('')
            $(this).find('input:visible').first().focus()
        })

        // Edit Button
        $('#edit').click(function() {
            var id = $(this).attr('data-id')
            if (!!scheds[id]) {
                var _form = $('#schedule-form')
                console.log(String(scheds[id].start_datetime), String(scheds[id].start_datetime).replace(" ", "\t"))
                _form.find('[name="id"]').val(id)
                _form.find('[name="title"]').val(scheds[id].title)
                _form.find('[name="recipient"]').val(scheds[id].recipient)
                _form.find('[name="phone"]').val(scheds[id].phone)
                _form.find('[name="description"]').val(scheds[id].description)
                _form.find('[name="address"]').val(scheds[id].address)
                _form.find('[name="start_datetime"]').val(String(scheds[id].start_datetime).replace(" ", "T"))
                
                $('#event-details-modal').modal('hide')
                _form.find('[name="title"]').focus()
            } else {
                alert("Event is undefined");
            }
        })

        // Delete Button / Deleting an Event
        $('#delete').click(function() {
            var id = $(this).attr('data-id')
            if (!!scheds[id]) {
                var _conf = confirm("Are you sure to delete this scheduled event?");
                if (_conf === true) {
                    location.href = "./delete_schedule.php?id=" + id;
                }
            } else {
                alert("Event is undefined");
            }
        })
    })

Tags: javascript php

Answers

Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>

JavaScript

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

I found from the below link
https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp

- TopMaster
- October 12, 2022 at 6:54 am
- 0 votes
0
Almost everything the form submits can be found in global $_REQUEST variable.

First debug/check what your form-submit produces, like:
```
var_dump( $_REQUEST );
```
But (as mentioned in comments) your checkbox-inputs do not have any names, hence they never get submitted, to fix that set the name attribute in HTML like:
```
<input type="checkbox"
       name="myCoolCheckbox"
       id="my-checkbox-id"
       checked="checked">
<label for="my-checkbox-id">My Checkbox title</label>
```
However, you want to simply show a list of checked check-boxes, for that try something like:
```
var labels = '';

var _form = $('#schedule-form');
_form.find('[type="checkbox"]').each(function () {
    if (labels !== '') {
        labels += ', ';
    }
    labels += $(this).text();
});

// Fill placeholder:
var _details = $('#event-details-modal');
_details.find('#checked-options').text(labels);
```
Also, add to modal the placeholder’s HTML:
```
<dt class="text-muted">Checked options</dt>
<dd id="checked-options" class=""></dd>
```
Login or Signup to reply.

Your checkbox inputs do not have a name.
<input/> needs a name.

If you use JavaScript to add the names, that is insane. Did you develop this code on your own, or did you copy and paste? If this copy and paste I could help you develop code that will work very well. There is no need to use JavaScript.

                                            <div class="form-check">
                                              <label class="form-check-label">
                                              <input type="checkbox" class="form-check-input">
                                              Pancit
                                              </label>
                                            </div>

See the name="Pancit"

                                            <div class="form-check">
                                              <label class="form-check-label">
                                              <input type="checkbox" name="Pancit" class="form-check-input">
                                              Pancit
                                              </label>
                                            </div>

Please signup or login to give your own answer.

Click here to cancel reply.