I have a form in which i have two sets of radio buttons and one textbox to enter the quantity value.
Based on the radio button selected and value in quantity textbox the total textbox should get populated with values.
I am using array to do the calculation but the value in total fields is displayed as NAN.
Can anyone check my code and let me know where i am wrong??
**HTML**
<form id="orderform" name="orderform" >
<fieldset data-role="controlgroup">
<legend><b>Choice</b></legend>
<input type="radio" name="choice" id="veg" value="1" checked onclick="total()">
<label for="veg">Vegetarian</label>
<input type="radio" name="choice" id="nonveg" value="2" onclick="total()">
<label for="nonveg">Meat Lover</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
</fieldset>
<div><b>Quantity</b>
<input type="text" id ="qty" name="qty" size="5" onclick="total()">
</div><div>
<b>Total</b>
<input type="text" id="amt" name="amt" readonly="readonly">
</div>
Javascript
Javascript
var array=[[8.99,9.99,10.99],[9.99,10.99,11.99]];
function total()
{
var row = document.querySelector('input[name="choice"]:checked').value;
var column = document.querySelector('input[name="size"]:checked').value;
var qty=document.getElementById("qty").value;
var total=0;
total= (array[row][column]+1)*qty;
document.orderform.amt.value = total;
}
You have to change size group in html like below
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" value="1" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" value="2" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" value="3" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
it will work for you
var column = document.querySelector('input[name="size"]:checked').value;
you can alert(column), you'll find that value is "on". because you didn't setup any value in all of your size group
Related
So I was tasked with creating a menu in which the user will choose between four noodles, four main dishes, and three sides. The sides will multiply the price of the main dish. The catch is that for every noodle the user checked, it will be incremented to the total price by 50%. So, if the user pays $120 and chooses two noodles, it will be $180.
I know that the checkbox will call for two functions, but I have no clue as to how it would work only if there are two or more checked checkboxes. Can someone help or guide me into how to actually perform this?
Fiddle
function pmodel() {
Model();
finalCost();
}
function Model() {
if (document.querySelector('input[name="NDLS"]:checked')) {
document.getElementById("MMD").disabled = false;
document.getElementById("ADDONS").disabled = false;
} else {
document.getElementById("MMD").disabled = true;
document.getElementById("ADDONS").disabled = true;
}
}
function total() {
var selected1 = document.querySelector('input[name="MD"]:checked').value;
var selected2 = document.querySelector('input[name="ADDONS"]:checked').value;
//var totals = 0;
totals = (selected1 * selected2);
finalCost(totals);
}
function finalCost(totals) {
//totals += (totals * document.querySelector('input[id="PMODEL"]').value);
document.getElementById("amount").value = totals;
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
First of all don't use same ID more than once, they should be unique.
Instead of that you can set your checkboxes with same class (just for ease selecting) and then count how many of them are checked:
function pmodel() {
var count = 0;
var list=document.getElementsByClassName("PNDLS");
for (var i = 0; i < list.length; ++i) { if(list[i].checked) { count++; } }
console.log(count);
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
I have a series of elements on a form:
<input type="radio" name="options[0]" value="Mens" />Mens
<input type="radio" name="options[0]" value="Womens" />Womens <hr>
<input type="radio" name="options[1]" value="XL" />XL
<input type="radio" name="options[1]" value="L" />L
<input type="radio" name="options[1]" value="M" />M
<input type="radio" name="options[1]" value="S" />S <hr />
<input type="checkbox" size="16" name="options[2]" value="Printed Name" />Printed Name
How can I access the values of the radio button for my validation routine?
Use querySelectorAll
var radios = document.querySelectorAll('input[type=radio][name^=options]');
[name^=options] matches elements whose name begins with options.
You can then loop over radios.
I have a group of radio buttons and two text fields. When a radio button is checked, its label and only its label is supposed to turn bold. However only the last one executes the onclick event, and this turns all the other labels bold in addition to its own, which it should not do. The other radio buttons do nothing when checked.
This is my form, which is in the body of the html document:
<form name="form1">
From Date: <input type=text name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type=text name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List
<br>
<input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar
<br>
<input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt
<br>
<input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching
<br>
<input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List
<br>
</form>
and these are the functions that are supposed to respond to the onclick event, which are in separate sets of script tags in the head of the html document:
<script type="text/javascript">
function checkCBfont() {
var ckBx=document.getElementsByTagName('INPUT'); // -- get all the input elements in the document
var t='';
for (i=0; i < ckBx.length;i++) {
t=ckBx[i].getAttribute('type');
if(t!=null){t=t.toLowerCase();}
if (t=='checkbox'||t=='radio') { // -- get only those inputs that are checkboxes or radio buttons
togglefont(ckBx[i]); // -- if they're checked, make them bold, else make them normal
}
}
}
</script>
<script type="text/javascript">
function togglefont(cb) {
//...toggle the label on a checkbox from bold to not-bold and back, when checked...
if (cb.checked==true || cb.checked) {
cb.parentNode.style.fontWeight='bold';
}else{
cb.parentNode.style.fontWeight='normal';
}
}
</script>
I have tried several different approaches, including but not limited to using inspect element, try...catch, and google, but I cannot seem to locate the problem.
To reiterate, the problem is that the last radio button bolds all the labels in lieu of each radio button only bolding its own label when clicked/checked.
Can anyone offer any advice and/or suggestions?
The parent element of your radio inputs is the <form>-tag. Therefore, if you change the font weight of the parent element, all labels are changed. You have to include all labels inside another element, e.g.:
<form name="form1">
From Date: <input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List </span>
<br>
</form>
The JavaScript part worked for me without problems.
Example here
You can do this with JQuery with a lot less code: https://jsfiddle.net/ezj1Lfbw/10/
HTML
<form name="form1">
From Date:
<input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br> To Date:
<input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked>List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly">Current/Future List </span>
<br>
</form>
JQuery
$('span').click(function() {
$('span').removeClass('bold')
$(this).addClass('bold')
})
CSS
.bold {
font-weight: bold;
}
I have a working code where i output the price using value="" but i need a way to get data from data-price="" so that i can use value="" to store SKUs.
Working demo here http://jsfiddle.net/pe2gpp01/21/
What does this code do? It returns fixed price for female for all products. Price changes for Male only.
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
<script>
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});
</script>
I need data from this
<input name="category" type="radio" value="SKU001" data-price="10">
<label>Product A</label>
<input name="category" type="radio" value="SKU002" data-price="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="SKU003" data-price="30">
<label>Product C</label>
<input name="category" type="radio" value="SKU004" data-price="40">
<label>Product D</label>
You have to use data method to get data-price attribute
$('[name="category"]:checked').data('price')
This code is saying if you have a value female element checked, then set the price to 10, otherwise price is the value in named category.
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
... so, this ...
var price = $('[value="female"]')[0].checked
? 10 + parseInt($('[name="category"]:checked').val(),10)
: $('[name="category"]:checked').val();
... will add 10 to the category value (note the user of the parseInt function for proper addition.
I have this problem: In my form i have one list of questions and this questions have multiples answers with radio buttons that have the same name.
If i have one question, no problem, but if i have two or more questions i have a lot of radio buttons with the same name.
I have this in HTML:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
I can't change the name or the value, because i need this properties to save the answer of the user.
The user select one radio and if the user select other radio of the other question, the radio of the first question change and show only one radio selected.
You need to have a different name for the radio buttons in each question. Radio buttons with the same name can only be used as one "group." Example:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="like_answer">
<label>No</label>
<input type="radio" value="36" name="like_answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="interested_answer">
<label>No</label>
<input type="radio" value="36" name="interested_answer">
change name
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertwo">
<label>No</label>
<input type="radio" value="36" name="answertwo">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertree">
<label>No</label>
<input type="radio" value="36" name="answertree">