I will try and be brief. When a user selects items in a checkbox, I want them to be able to press a submit button and it will send an email of the ingredients to a static email address. I am trying to store the values of the check boxes in an array called finalOrder, and have that array in the contents of the email.
I am fairly new to both languages, can I use the submit button to call the PHP code? Is the PHP written correctly? I am not too sure how to go about this.
Here is what I have so far.
<div>
<input type="checkbox" name="foodType" data-name="Chicken Thighs"> <label
for="chickenThighs">Chicken Thighs</label>
<input type="checkbox" name="foodType" data-name="Chicken Breast"> <label
for="chickenBreast">Chicken Breast</label>
<input type="checkbox" name="foodType" data-name="Chicken Leg"> <label
for="chickenLeg">Chicken Leg</label>
</div>
<div id='results'>
</div>
<script type="text/javascript">
var finalOrder = [];
document.querySelectorAll('input[name=foodType]').forEach(elem => {
elem.addEventListener('change', updateList);
});
function buildList ()
{
let list = '<ul>';
finalOrder.forEach(str => {
list += "<li>" + str + '</li>';
});
list += '</ul>';
return list;
}
function updateList ()
{
finalOrder = []; // Reset this array so that we can populate it with the new checkbox answers.
document.querySelectorAll('input[name=foodType]').forEach(v => {
if (v.checked) {
finalOrder.push(v.dataset.name);
}
});
document.querySelector('#results').innerHTML = buildList();
}
</script>
<input type="submit" value="Submit">
<?php
// the message
$msg = finalOrder;
// use wordwrap() if lines are longer than 70 characters
$msg = wordwrap(finalOrder($msg,70));
// send email
mail("my@email.com","New Order",$msg);
?>
There is one thing, missing so far.
You can also consider the approach stated by @jaaba
<div>
<form method="POST" action="thisFile.php">
<input type="checkbox" name="foodType" data-name="Chicken Thighs"> <label
for="chickenThighs">Chicken Thighs</label>
<input type="checkbox" name="foodType" data-name="Chicken Breast"> <label
for="chickenBreast">Chicken Breast</label>
<input type="checkbox" name="foodType" data-name="Chicken Leg"> <label
for="chickenLeg">Chicken Leg</label>
</div>
<input type="submit" value="Submit">
</form>
<div id='results'>
</div>
<script type="text/javascript">
var finalOrder = [];
document.querySelectorAll('input[name=foodType]').forEach(elem => {
elem.addEventListener('change', updateList);
});
function buildList ()
{
let list = '<ul>';
finalOrder.forEach(str => {
list += "<li>" + str + '</li>';
});
list += '</ul>';
return list;
}
function updateList ()
{
finalOrder = []; // Reset this array so that we can populate it with the new checkbox answers.
document.querySelectorAll('input[name=foodType]').forEach(v => {
if (v.checked) {
finalOrder.push(v.dataset.name);
}
});
document.querySelector('#results').innerHTML = buildList();
}
</script>
<?php
// the message
$msg = finalOrder;
// use wordwrap() if lines are longer than 70 characters
$msg = wordwrap(finalOrder($msg,70));
// send email
mail("my@email.com","New Order",$msg);
?>