I'd like to calculate values in form. Each total from each table with the class of category needs to be filled in the textbox named subtotal. Then, each values of input named subtotal needs to be added and filled in the textbox named total.
However, I am totally stack, then, can not figure out. Please help.
I've tried to loop each table to calculate but didn't work.
function calc() {
price = 0;
for (i = 0; i < document.myform.length - 1; i++) {
if (document.myform.elements[i].checked) {
price += eval(document.myform.elements[i].value);
}
}
document.myform.subtotal.value = price;
var sumup = 0;
for (var i = 0; i < subtotal.length; i++) {
sumup += eval(subtotal[i].value);
}
document.myform.total.value = sumup;
document.myform.discount30.value = sumup * .7;
}
<form name="myform">
<table class="category">
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<ul>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<input type="text" name="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<input type="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
<ul>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
</ul>
<label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
</td>
</tr>
<tr>
<td><label>amount：<input type="text" name="subtotal">yen</label></td>
</tr>
</table>
<table class="category">
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<ul>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
<li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" value="500" onClick="calc()">500</label>
<input type="text" name="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
<input type="text" value="">
</td>
</tr>
<tr>
<td>
<label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
<ul>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
<li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
</ul>
<label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
</td>
</tr>
<tr>
<td><label>amount：<input type="text" name="subtotal">yen</label></td>
</tr>
</table>
<table class="output">
<tr>
<td><label>total：<input type="text" name="total">yen</label></td>
</tr>
<tr>
<td><label>30% discount：<input type="text" name="discount30">yen</label></td>
</tr>
<tr>
<td><input type="reset" value="reset"></td>
</tr>
</table>
</form>
Related
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>
You could use
document.querySelectorAll("input[type=radio]:checked");
document.querySelectorAll("input[type=checkbox]:checked");
in order to get all the selected checkboxes and radio buttons
here is an updated snippet
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"> </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>
<br>
</form>
<button id="confirm" class="button">Place Order</button>
<span id="orderConfirm"> </span>
Check this do you want all select values of form input check and radio buttons ?
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"> </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>
I have code as:
let aid = 1;
if($("#ar_"+aid+" .radio input:checked").is(':disabled')){
$("#ar_"+aid).closest('.radio input').is(':enabled').attr("checked",true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
Here, I have lists of radio buttons. So, at first I will have a id, in this case I have considered that id as 1. Now, I want to do the following things:
check if the radio button with id ar_+aid is disabled (already done)
if it is disabled find the next radio button which is not disabled (i.e, radio button with the same name) of this case the third (ar_3) should be is the closest one, however, it shouldn't go to another radio group.
if every radio button is disabled just console the message, that all are disabled. (i.e if I pass id 11, this should throw an error as all 12,9 and 10 are disabled)
How could I achieve it? Let me know if you need anything more.
You can use name attribute of radio buttton to find the input which is not disabled using $("input[name=" + name + "]:not(:disabled):first") which will checked if the radio with name is not disable and get the :first input while searching then you can use .prop('checked', true) to add checked attribute to that radio button.
Demo Code :
let aid = 1;
//get name of radio
var name = $("#ar_" + aid + " .radio input").attr("name");
//check if disable
if ($("#ar_" + aid + " .radio input").is(':disabled')) {
var count = 0;
//get the rado button whch is not disable
$("input[name=" + name + "]:not(:disabled):first").each(function() {
$(this).prop('checked', true) //prop true
count++;
})
if (count == 0) {
console.log("All disable....")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="background:#c3c3c3" id="t_1">
<tbody>
<tr class="amenities-row" id="ar_1">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_1" value="1" disabled>
<label for="am_1">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_1" type="checkbox" value="1" checked>
<label for="checkbox_am_1">
</label>
</div>
</td>
<td>
Amenity 1
</td>
</tr>
<tr class="amenities-row" id="ar_2">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_2" value="1" disabled>
<label for="am_2">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_2" type="checkbox" value="1" checked>
<label for="checkbox_am_2">
</label>
</div>
</td>
<td>
Amenity 2
</td>
</tr>
<tr class="amenities-row" id="ar_3">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_3" value="1">
<label for="am_3">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_3" type="checkbox" value="1" checked>
<label for="checkbox_am_3">
</label>
</div>
</td>
<td>
Amenity 3
</td>
</tr>
<tr class="amenities-row" id="ar_4">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_1" id="am_4" value="1" disabled>
<label for="am_4">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_4" type="checkbox" value="1" checked>
<label for="checkbox_am_4">
</label>
</div>
</td>
<td>
Amenity 4
</td>
</tr>
</tbody>
</table>
<table id="t_2">
<tbody>
<tr class="amenities-row" id="ar_5">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_5" value="1">
<label for="am_5">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_5" type="checkbox" value="1" checked>
<label for="checkbox_am_5">
</label>
</div>
</td>
<td>
Amenity 5
</td>
</tr>
<tr class="amenities-row" id="ar_6">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_6" value="1">
<label for="am_6">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_6" type="checkbox" value="1" checked>
<label for="checkbox_am_6">
</label>
</div>
</td>
<td>
Amenity 6
</td>
</tr>
<tr class="amenities-row" id="ar_7">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_7" value="1" disabled>
<label for="am_7">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_7" type="checkbox" value="1" checked>
<label for="checkbox_am_7">
</label>
</div>
</td>
<td>
Amenity 7
</td>
</tr>
<tr class="amenities-row" id="ar_8">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_2" id="am_8" value="1" disabled>
<label for="am_8">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_8" type="checkbox" value="1" checked>
<label for="checkbox_am_8">
</label>
</div>
</td>
<td>
Amenity 8
</td>
</tr>
</tbody>
</table>
<table id="t_3" style="background:lime">
<tbody>
<tr class="amenities-row" id="ar_9">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_9" value="1" disabled>
<label for="am_9">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_9" type="checkbox" value="1" checked>
<label for="checkbox_am_9">
</label>
</div>
</td>
<td>
Amenity 9
</td>
</tr>
<tr class="amenities-row" id="ar_10">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_10" value="1" disabled>
<label for="am_10">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_10" type="checkbox" value="1" checked>
<label for="checkbox_am_10">
</label>
</div>
</td>
<td>
Amenity 10
</td>
</tr>
<tr class="amenities-row" id="ar_11">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_11" value="1" disabled>
<label for="am_11">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_11" type="checkbox" value="1" checked>
<label for="checkbox_am_11">
</label>
</div>
</td>
<td>
Amenity 11
</td>
</tr>
<tr class="amenities-row" id="ar_12">
<td>
<div class="radio radio-info pl-2">
<input type="radio" name="base_cat_3" id="am_12" value="1" disabled>
<label for="am_12">
</label>
</div>
</td>
<td>
<div class="checkbox checkbox-info pl-2">
<input name="selected_am" id="checkbox_am_12" type="checkbox" value="1" checked>
<label for="checkbox_am_12">
</label>
</div>
</td>
<td>
Amenity 12
</td>
</tr>
</tbody>
</table>
**UPDATED 3/25/20 11:20 est **
The issue I am having now is the code is not using num3 as intended. It is set up like the rest of the code in the HTML and script. This is the set up of my form:
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
</td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
This is my function:
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=Number(document.arrowCalc.txtDraw.value)-.5;
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value;
num4=Number(document.arrowCalc.txtInsert.value);
num5=Number(document.arrowCalc.txtBroad.value);
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
res=(num1*num2)+num4+num5+(num6*num7)+10+num3;
document.arrowCalc.txtRes.value=res;
}
With the exception as num3, all other variables are working as expected. If I would make num3 a text input or a dropdown box, the code also works as expected. Currently num3 will just add the value to the end of the total number. For instance if I am expecting an answer of 775.25 and I select the Standard nock (value of 6) the answer would be 769.256. The same thing happens when I move num3 to other spots in the res= line, it will just place the values at the end of the decimal.
The numbers I have been using for this are:
Draw Length (num1) = 29
Spine (num2) = 12.5 (spine250)
Nock (num3) = 6 (standard)
Insert (num4) = 175
Broadhead (num5) = 200
Vane type (num6) = 7 (Fusion 2.1)
Vane number (num7) = 4
As previously stated, this should equal 775.25
Try using eval()
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
</form>
I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show. User would select a radio button to additionally display either columns 2&3 or column 4
I have found code that hides the column groups, but the radio buttons in side the column still display. I am trying to collapse the columns and everything inside of them too. I am teaching myself CSS and I know nothing about javascript so it could just be user error.
<!DOCTYPE html>
<!-- cg2.Style.visibility="hidden"
cg3.Style.visibility="hidden"
cg4.Style.visibility="hidden"-->
</script>
</head>
<body onload="vbscript:Startup window.dialogarguments">
<form name="baseform" id="baseform" action="" method="post">
<div id="showhide">
<label><input type="radio" name="T_097_WD" id="T_097lft" value="L1M" />this button Shows columns 2 & 3
</label>
<label><input type="radio" name="T_097_WD" id="T_097slv" value="SLV" />this button Shows column 4
</label>
</div>
<table border="1" style="width:50%" >
<COLGROUP id=cg1></COLGROUP>
<COLGROUP id=cg2></COLGROUP>
<COLGROUP id=cg3></COLGROUP>
<COLGROUP id=cg4></COLGROUP>
<tr>
<td>Never hide this column</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
</tr>
<tr>
<td>Q2</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q3</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q4</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q5</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
</table>
If I understand you correctly, the following solution should work for you.
var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
if (e.target.tagName === "INPUT" && e.target.type === "radio") {
//get radio value
var value = document.querySelector('input[type="radio"]:checked').value;
//get items by column
var one = document.querySelectorAll("td:nth-child(1)");
var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
var four = document.querySelectorAll("td:nth-child(4)");
//hide all columns
hideOrShow(one, false);
hideOrShow(twothree, false);
hideOrShow(four, false);
//show selected columns
switch (value) {
case "one":
hideOrShow(one, true);
break;
case "twothree":
hideOrShow(twothree, true);
break;
case "four":
hideOrShow(four, true);
break;
}
}
});
function hideOrShow(nodes, show) {
[].forEach.call(nodes, function(item) {
item.style.display = show ? "inline-block" : "none";
});
}
//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);
<div id="selection">
<label>
First
<input type="radio" name="shown" value="one" checked />
</label>
<label>
Two and Three
<input type="radio" name="shown" value="twothree" />
</label>
<label>
Four
<input type="radio" name="shown" value="four" />
</label>
</div>
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
I'm making the assumption that you are not able to reference a column in a table, rather than needing information on responding to radio button events. Assuming this is the case, read on.
Add a class to each table element so that you can identify which elements belong to which rows. Then based on a radio button event, run a function to hide all elements with the appropriate class name.
For example
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
Now you can use jQuery to do something like:
$('.col2').hide();
Each cell with the class col2 will be hidden, which means every cell in the second column.
You should be able to find the appropriate code to respond to radio button change events on the web if you don't already know it.