jeudi 29 octobre 2020

Summary of Selected Radio Buttons

I am interested in producing a summary of the selected radio buttons and checkboxes on an HTML form. I've figured out how to produce a summary of the input for text fields, but not radio buttons or checkboxes. (Sorry this is very basic, I'm very new to JavaScript.) I tried approaching the radio buttons in a similar way to how I produced the order summary for the text fields, but that didn't work.

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>



Aucun commentaire:

Enregistrer un commentaire