选定单选按钮摘要

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

你可以使用

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

为了得到所有选中的复选框和单选按钮

这是一个更新的sn-p

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>

Answer 2

勾选这个你想要表单输入检查和单选按钮的所有选择值吗？

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>