Intentaré ser breve. Cuando un usuario selecciona elementos en una casilla de verificación, quiero que pueda presionar un botón de envío y enviará un correo electrónico con los ingredientes a una dirección de correo electrónico estática. Estoy tratando de almacenar los valores de las casillas de verificación en una matriz llamada finalOrder y tener esa matriz en el contenido del correo electrónico.
Soy bastante nuevo en ambos idiomas, ¿puedo usar el botón Enviar para llamar al código PHP? ¿El PHP está escrito correctamente? No estoy muy seguro de cómo hacer esto.
Esto es lo que tengo hasta ahora.
<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); ?>Hay una cosa que falta hasta ahora.
También puede considerar el enfoque declarado por @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); ?>