Get values of checkbox values by jquery from modal form window

I can’t find the solution to retrieve checkbox values in my update.php file.

May be these syntaxs is not correct to send the data to the update.php file ?

extralist_text: $editor.find(‘#extralist_text’).val(),

and or

extralist_text: values[‘extralist_text’],

Thank you to help me.

bellow my simplifed code:

<!-- MODAL -->
        <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
            <div class="modal-dialog" role="document">
                <form class="modal-content form-horizontal" id="editor">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editor-title">ADD</h4>
                    </div>
                    <div class="modal-body">
                        <input type="number" id="id" name="id" class="hidden" />
                        <!-- Checkbox Text -->
                        <div class="form-group">
                            <label for="extralist_text" class="col-sm-3 control-label">TEXT</label>
                            <div class="col-sm-9">
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="1" /> Text 1
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="2" checked="checked" />Text 2
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="3" checked="checked" /> Text 3
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="4" /> Text 4
                                <!------------------>
                            </div>
                        </div>
                        
                       <!-- Title -->
                        <div class="form-group">
                            <label for="extralist_title" class="col-sm-3 control-label">Title</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="extralist_title" name="extralist_title"  required>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        
        <script>
        /* -------------------------------------- */
            jQuery(function($){
                var $modal = $('#editor-modal'),
                    $editor = $('#editor'),
                    $editorTitle = $('#editor-title'),
                    
                    ft = FooTable.init('#editing-data', {
                        columns: $.get("content/columns.json"),
                        editing: {
                            enabled: true,
                            
                            addRow: function(){
                                $modal.removeData('row');
                                $editor[0].reset();
                                $editorTitle.text('New list');
                                $modal.modal('show');
                            },
        
                            editRow: function(row){
                                var values = row.val();
                                $editor.find('#id').val(values.id);
                                $editor.find('#extralist_text').val(values.extralist_text);
                                $editor.find('#extralist_title').val(values.extralist_title);
                                
                                $modal.data('row', row);
                                $editorTitle.text('list : ' + values.extralist_title);
                                $modal.modal('show');
                            },
                            
                            deleteRow: function(row){
                                if (confirm('Cancel ?')){
                                    var values = row.val();
                                    $.ajax({
                                    url: 'delete.php',
                                    dataType: "json",
                                    data:{id: values.id, select_evenement: values.select_evenement},
                                  success: function(data) {
                                    if (data.return) {
                                    row.delete();
                                        alert(data.message);
                                    } else {
                                        alert(data.message);
                                    }
                                    },
                                    });             
                                }
                            }
                        }
                    });
                    
        
                $editor.on('submit', function(e){
                    if (this.checkValidity && !this.checkValidity()) return;
                    e.preventDefault();
                    var row = $modal.data('row'),
                        values = {
                            id: $editor.find('#id').val(),
                            extralist_text: $editor.find('#extralist_text').val(),
                            extralist_title: $editor.find('#extralist_title').val()
                        };
        
                    if (row instanceof FooTable.Row){
                            $.ajax({
                            url: 'update.php',
                            dataType: "json",
                            cache: false,
                            data:{
                            id: values['id'],
                            extralist_text: values['extralist_text'],
                            extralist_title: values['extralist_title']
                            },
                                  success: function(data) {
                                    if (data.return) {
                                        alert(data.message);
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                  },
                            });             
                        
                        
                    } else {
                            $.ajax({
                            url: 'insert.php',
                            data:{
                            id: values['id'],
                            extralist_text: values['extralist_text'],
                            extralist_title: values['extralist_title']
                            },
                                  success: function(data) {
                                    if (data.return) {
                                        alert(data.message);
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                  },
                            });             
                    }
                    $modal.modal('hide');
                });
            });
        </script>

Answer

You can use each loop through to iterate through all checkboxes which checked and get its value using $(this).val() and store same in some array so that you can easily pass that values to your backend page.

Demo Code :

$editor = $('#editor'),
  $editor.on('submit', function(e) {
    if (this.checkValidity && !this.checkValidity()) return;
    e.preventDefault();
    var yourArray = [];
    //loop through all checkboxes which is checked
    $('#editor input[type=checkbox]:checked').each(function() {
      yourArray.push($(this).val());//push value in array
    });
   
    values = {
      id: $editor.find('#id').val(),
      extralist_text: yourArray,//pass same 
      extralist_title: $editor.find('#extralist_title').val()
    };
    console.log(values)
    //your ajax call
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
  <div class="modal-dialog" role="document">
    <form class="modal-content form-horizontal" id="editor">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="editor-title">ADD</h4>
      </div>
      <div class="modal-body">
        <input type="number" id="id" name="id" class="hidden" value="12" />
        <!-- Checkbox Text -->
        <div class="form-group">
          <label for="extralist_text" class="col-sm-3 control-label">TEXT</label>
          <div class="col-sm-9">
            <input type="checkbox" id="extralist_text" name="extralist_text[]" value="1" /> Text 1
            <input type="checkbox" id="extralist_text" name="extralist_text[]" value="2" checked="checked" />Text 2
            <input type="checkbox" id="extralist_text" name="extralist_text[]" value="3" checked="checked" /> Text 3
            <input type="checkbox" id="extralist_text" name="extralist_text[]" value="4" /> Text 4
            <!------------------>
          </div>
        </div>

        <!-- Title -->
        <div class="form-group">
          <label for="extralist_title" class="col-sm-3 control-label">Title</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="extralist_title" name="extralist_title" required>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>