I'm using SweetAlert2 to display forms which is working just great, however I have recently run into a problem that I am unable to solve and I have already wasted days trying to find a solution on Google.
I'm building a form dynamically with PHP that is loaded by Sweet Alert. The form contains multiple check-boxes with the same name/id. I have 3 sets of multiple check-boxes and because its a dynamic form I don't know how many check-boxes will be in each set.
The Check-box sets are named invoice_details, invoice_hours and invoice_materials. Each set might have no check-boxes or they might have ten or more. But each set of check-boxes have the same name, so invoice_details set are all named invoice_details.
How can I get the results into an array for each group of check-boxes and pass them to the promise so I can process the form in a php page?
<script type="text/javascript">
// SCRIPT TO ADD INVOICE
//Warning Message with function
$(document).on('click', '#addinvoice', function(){
swal({
title: 'Generate New Invoice',
html: '<?php echo tm_generate_invoice_form( $post->ID ) ?>',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
buttonsStyling: true,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#invoice_number').val(),
$('#invoice_details').val(),
$('#invoice_hours').val(),
$('#invoice_materials').val(),
$('#invoice_custom_message').val(),
$('#jobid').val(),
$('#tm_add_invoice').val()
])
})
}
}).then(function(result){
swal(
"Invoice Created!",
"Invoice now ready to be sent to customer.",
"success"
);
$.ajax({
type: 'post',
url: '<?php echo admin_url( 'admin-ajax.php' ) ?>',
data: {
action: 'tm_add_invoice',
invoice_number: result[0],
invoice_details: result[1][0],
invoice_hours: result[2][0],
invoice_materials: result[3][0],
invoice_custom_message: result[4],
jobid: result[5],
tm_add_invoice: result[6]
},
success: function(data){
$('#invoices').html(data);
},
error: function(e){
alert("error " + e);
console.log(e);
}
});
});
});
</script>
Forget ids. Build the form with name attributes of the format name="xxx[]".
For example :
<form id="myForm">
<input name="invoice_number" value="invoice_no_000" /><br/>
<br/>
<input type="checkbox" name="invoice_details[]" value="abc" /><br/>
<input type="checkbox" name="invoice_details[]" value="bcd" /><br/>
<br/>
<input type="checkbox" name="invoice_hours[]" value="cde" /><br/>
<input type="checkbox" name="invoice_hours[]" value="def" /><br/>
<input type="checkbox" name="invoice_hours[]" value="efg" /><br/>
<input type="checkbox" name="invoice_hours[]" value="fgh" /><br/>
<br/>
<input type="checkbox" name="invoice_materials[]" value="ghi" /><br/>
<input type="checkbox" name="invoice_materials[]" value="hij" /><br/>
<input type="checkbox" name="invoice_materials[]" value="ijk" /><br/>
<input type="checkbox" name="invoice_materials[]" value="jkl" /><br/>
<input type="checkbox" name="invoice_materials[]" value="klm" /><br/>
<input type="checkbox" name="invoice_materials[]" value="lmn" /><br/>
<input type="checkbox" name="invoice_materials[]" value="mno" /><br/>
<br/>
<!-- other fields as necessary -->
<br/>
<input type="submit" />
</form>
Elements within each set need not necessarily be adjacent. Interleaved elements will serialize in the same way.
Now you can simply serialize the form with jQuery's .serialize().
'preConfirm': function () {
return Promise.resolve($('#myForm').serialize());
}
As the documentation says :
Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
So, depending on which checkboxes are checked, the resultant serialization (with added line breaks) might be :
invoice_number%5B%5D=invoice_no_000&
invoice_details%5B%5D=bcd&
invoice_hours%5B%5D=cde&
invoice_hours%5B%5D=fgh&
invoice_materials%5B%5D=hij&
invoice_materials%5B%5D=jkl&
invoice_materials%5B%5D=klm&
invoice_materials%5B%5D=lmn
And server-side, PHP will see the data as :
I suspect this is what is required.