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"> </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"> </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"> </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"> </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"> </span>
</form>
Aucun commentaire:
Enregistrer un commentaire