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">×</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>
Advertisement
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">×</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>