所選單選按鈕的摘要

Question

我有興趣在 HTML 表單上生成所選單選按鈕和復選框的摘要。 我已經想出了如何為文本字段生成輸入摘要，而不是單選按鈕或復選框。 （對不起，這是非常基礎的，我對 JavaScript 很陌生。）我嘗試以類似於我如何為文本字段生成訂單摘要的方式來處理單選按鈕，但沒有奏效。

 function calcOrder() { var firstName = document.getElementById ("firstName").value; var lastName = document.getElementById ("lastName").value; var userName = firstName + " " + lastName; var phone = document.getElementById ("phone").value; var email = document.getElementById ("email").value; document.getElementById ("orderConfirm").innerHTML = "<h4>Order Summary:</h4>"; document.getElementById ("orderConfirm").innerHTML += "<p>" + userName + "<br>" + phone + "<br>" + email + "</p>"; }

 <form> <table border="0"> <tr> <!--First Name--> <td class="lable_col">First Name:</td> <td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td> <td class="feedback_col"><span id="firstNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Last Name--> <td class="lable_col">Last Name:</td> <td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td> <td class="feedback_col"><span id="lastNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Phone Number--> <td class="lable_col">Phone:</td> <td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td> <td class="feedback_col"><span id="phonePrompt">&nbsp;</span></td> </tr> <tr> <!--Email--> <td class="lable_col">Email:</td> <td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith@gmail.com" onblur="validateEmail();"></td> <td class="feedback_col"><span id="emailPrompt">&nbsp;</span></td> </tr> </table> <h3>Order</h3> Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br> <input type="radio" name="burritoorbowl" value="Bowl">Bowl<br> Rice <br><input type="radio" name="rice" value="White" checked>White<br> <input type="radio" name="rice" value="Brown">Brown<br> <input type="radio" name="rice" value="None">None<br> Beans <br><input type="radio" name="beans" value="Black" checked>Black<br> <input type="radio" name="beans" value="Pinto">Pinto<br> <input type="radio" name="beans" value="None">None<br> Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br> <input type="radio" name="protein" value="Pork">Pork<br> <input type="radio" name="protein" value="Chickn">Chicken<br> <input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br> <input type="radio" name="protein" value="None">None<br> Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br> <input type="checkbox" name="toppings" value="Lettuce">Lettuce<br> <input type="checkbox" name="toppings" value="Cheese">Cheese<br> <input type="checkbox" name="toppings" value="SourCream">Sour Cream<br> <input type="checkbox" name="toppings" value="Corn">Corn<br> <input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br> <input type="checkbox" name="toppings" value="Salsa">Salsa<br> <input type="checkbox" name="toppings" value="Guacamole">Guacamole<br> <h3>Additional Instructions</h3> <input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here..."> <br> <span class="button" onclick="calcOrder();">Place Order</span> <br> <span id="orderConfirm">&nbsp;</span> </form>

Answer 1

檢查這個你想要表單輸入檢查和單選按鈕的所有選擇值嗎？

 const form = document.querySelector('form') let summary; form.addEventListener('change', function() { summary = Object.values(form).reduce((obj,field) => { obj[field.name] = field.value; return obj }, {}) console.log(summary) });

 <form id="my-form"> <table border="0"> <tr> <!--First Name--> <td class="lable_col">First Name:</td> <td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td> <td class="feedback_col"><span id="firstNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Last Name--> <td class="lable_col">Last Name:</td> <td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td> <td class="feedback_col"><span id="lastNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Phone Number--> <td class="lable_col">Phone:</td> <td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td> <td class="feedback_col"><span id="phonePrompt">&nbsp;</span></td> </tr> <tr> <!--Email--> <td class="lable_col">Email:</td> <td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith@gmail.com" onblur="validateEmail();"></td> <td class="feedback_col"><span id="emailPrompt">&nbsp;</span></td> </tr> </table> <h3>Order</h3> Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br> <input type="radio" name="burritoorbowl" value="Bowl">Bowl<br> Rice <br><input type="radio" name="rice" value="White" checked>White<br> <input type="radio" name="rice" value="Brown">Brown<br> <input type="radio" name="rice" value="None">None<br> Beans <br><input type="radio" name="beans" value="Black" checked>Black<br> <input type="radio" name="beans" value="Pinto">Pinto<br> <input type="radio" name="beans" value="None">None<br> Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br> <input type="radio" name="protein" value="Pork">Pork<br> <input type="radio" name="protein" value="Chickn">Chicken<br> <input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br> <input type="radio" name="protein" value="None">None<br> Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br> <input type="checkbox" name="toppings" value="Lettuce">Lettuce<br> <input type="checkbox" name="toppings" value="Cheese">Cheese<br> <input type="checkbox" name="toppings" value="SourCream">Sour Cream<br> <input type="checkbox" name="toppings" value="Corn">Corn<br> <input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br> <input type="checkbox" name="toppings" value="Salsa">Salsa<br> <input type="checkbox" name="toppings" value="Guacamole">Guacamole<br> <h3>Additional Instructions</h3> <input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here..."> <br> <span class="button" onclick="calcOrder();">Place Order</span> <br> <span id="orderConfirm">&nbsp;</span> </form>

Answer 2

你可以用

   document.querySelectorAll("input[type=radio]:checked");
   document.querySelectorAll("input[type=checkbox]:checked");
   

為了獲得所有選定的復選框和單選按鈕

這是一個更新的片段

 const confirmBtn = document.getElementById("confirm"); confirmBtn.addEventListener("click", calcOrder); function calcOrder() { var firstName = document.getElementById ("firstName").value; var lastName = document.getElementById ("lastName").value; var userName = firstName + " " + lastName; var phone = document.getElementById ("phone").value; var email = document.getElementById ("email").value; const selectedRadio = document.querySelectorAll("input[type=radio]:checked"); const selectedCheckboxes = document.querySelectorAll("input[type=checkbox]:checked"); const result = document.getElementById("orderConfirm") let radioResult = ""; let checkboxResult = ""; let order = ` <h4>Order Summary:</h4> <p>${userName}<p> <p>${phone}</p> <p>${email}</p> <ul> `; for (let i = 0; i < selectedRadio.length; i++) { order += `<li>${selectedRadio[i].value}</li>`; } order += "</ul><ul>"; for (let i = 0; i < selectedCheckboxes.length; i++) { order += `<li>${selectedCheckboxes[i].value}</li>`; } order += "</ul>"; result.innerHTML = order; }

 <form> <table border="0"> <tr> <!--First Name--> <td class="lable_col">First Name:</td> <td class="input_col"><input name="firstName" id="firstName" type="text" placeholder="John" onblur="validateFirstName();"></td> <td class="feedback_col"><span id="firstNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Last Name--> <td class="lable_col">Last Name:</td> <td class="input_col"><input name="lastName" id="lastName" type="text" placeholder="Smith" onblur="validateLastName();"></td> <td class="feedback_col"><span id="lastNamePrompt">&nbsp;</span></td> </tr> <tr> <!--Phone Number--> <td class="lable_col">Phone:</td> <td class="input_col"><input name="phone" id="phone" type="text" placeholder="xxx-xxx-xxxx" onblur="validatePhone();"></td> <td class="feedback_col"><span id="phonePrompt">&nbsp;</span></td> </tr> <tr> <!--Email--> <td class="lable_col">Email:</td> <td class="input_col"><input name="email" id="email" type="text" placeholder="johnsmith@gmail.com" onblur="validateEmail();"></td> <td class="feedback_col"><span id="emailPrompt">&nbsp;</span></td> </tr> </table> <h3>Order</h3> Burrito or Bowl? <br><input type="radio" name="burritoorbowl" value="Burrito" checked>Burrito<br> <input type="radio" name="burritoorbowl" value="Bowl">Bowl<br> Rice <br><input type="radio" name="rice" value="White" checked>White<br> <input type="radio" name="rice" value="Brown">Brown<br> <input type="radio" name="rice" value="None">None<br> Beans <br><input type="radio" name="beans" value="Black" checked>Black<br> <input type="radio" name="beans" value="Pinto">Pinto<br> <input type="radio" name="beans" value="None">None<br> Protein <br><input type="radio" name="protein" value="Steak" checked>Steak<br> <input type="radio" name="protein" value="Pork">Pork<br> <input type="radio" name="protein" value="Chickn">Chicken<br> <input type="radio" name="protein" value="TofuChorizo">Tofu Churizo<br> <input type="radio" name="protein" value="None">None<br> Toppings <br><input type="checkbox" name="toppings" value="VeggieFajitas">Veggie Fajitas<br> <input type="checkbox" name="toppings" value="Lettuce">Lettuce<br> <input type="checkbox" name="toppings" value="Cheese">Cheese<br> <input type="checkbox" name="toppings" value="SourCream">Sour Cream<br> <input type="checkbox" name="toppings" value="Corn">Corn<br> <input type="checkbox" name="toppings" value="Tomatoes">Tomatoes<br> <input type="checkbox" name="toppings" value="Salsa">Salsa<br> <input type="checkbox" name="toppings" value="Guacamole">Guacamole<br> <h3>Additional Instructions</h3> <input type="text" name="additional" id="additional" inblur="validateAdditional();" placeholder="Your message here..."> <br> <br> </form> <button id="confirm" class="button">Place Order</button> <span id="orderConfirm">&nbsp;</span>