adding multiple checkboxes to a form element - forms

Question

Let's suppose: a page with some dynamically generated checkboxes outside of a form element.
After the user has checked some of the checkboxes, I would love to append all those checkboxes (either checked or unchecked) into the form element so that when the user click the "submit" button, the form takes into account the checkboxes, their ids, names, data-names and their status (checked or unchecked). Is that possible ?
I have tried a codpen here: https://codepen.io/anthonysalamin/pen/ZxvZpP?editors=1010 but was unsuccessful sofar.
The jQuery code:
//insert all checkbox input elements into the form id="reservation"
$("#reservation").submit(function(evt) {
// should append all checkboxes to the form
$("<input type='checkbox' />").append("#reservation");
});
Screenshot of my codpen here

Answer 1

.append() expects textual HTML as input. You have passed the id selector of #reservation instead. To effectively add the checkboxes to the form in the submit event you could do this:
// wait for DOM to be ready
$( document ).ready(function() {
//define the variable for all checkboxes on the page
var allCheckboxes = $("input:checkbox[class=outsider]");
//calls the append function on form submission
$("#form-element").submit(function(event) {
//insert all checkbox type elements into the form with id="form-element"
var checkHTML = "";
for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
checkHTML += allCheckboxes[checkboxIndex].outerHTML;
}
$("#form-element").append(checkHTML);
});
});
However, it is highly probable that your intention differs from the behavior. Problems with the code:
your checkboxes have ids and if we clone them, then you will have duplicate ids. Since an HTML cannot be valid if there are duplicate ids, cloning the checkboxes with ids will result in invalid HTML
checked state is not copied, so you will need to mine that value out and put it to the newly created checkboxes
Code dealing with all these problems:
// wait for DOM to be ready
$( document ).ready(function() {
//define the variable for all checkboxes on the page
var allCheckboxes = $("input:checkbox[class=outsider]");
//calls the append function on form submission
$("#form-element").submit(function(event) {
//insert all checkbox type elements into the form with id="form-element"
var checkHTML = "";
var checked = [];
for(var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
checked.push($(allCheckboxes[checkboxIndex]).prop('checked'));
allCheckboxes[checkboxIndex].remove();
checkHTML += allCheckboxes[checkboxIndex].outerHTML;
}
$("#form-element").append(checkHTML);
allCheckboxes = $('input:checkbox[class=outsider]');
console.log(checked);
for (var checkboxIndex = 0; checkboxIndex < allCheckboxes.length; checkboxIndex++) {
$(allCheckboxes[checkboxIndex]).prop('checked', checked[checkboxIndex]);
}
event.preventDefault();
});
});
So you can solve your problem by cloning the checkboxes if you handle all the problems. Alternatively, you could use a hidden input where you could put key-value pairs, where the keys will be checkbox ids and values will be their corresponding checked states and put those values into the hidden input at the submit handler. If you do not specifically intend to visually put the checkboxes into the form and you are satisfied with correct handling of data, then putting the JSON value of key-value pairs into the value of a hidden input is superior in comparison of copying checkboxes into the form, but these are only nuances.