|
JavaScript - Help With Checkbox Resetting Radio Values
I have a page where a user can select (via check boxes) several categories. Each category is related to a set of possible options (radio buttons) that have numeric values. When one of the options (radio button) is selected, the amount will appear in a text box (input type="text"). The numeric value in the text box will update depending on what category options are selected. However, when the checkbox is deselected, the radio boxes in the <div> are not displayed and I need to remove (reset) the radio button values from the value seen in the text box.
Here are some snippets to hopefully expound on what I would like to do. Code: <script type="text/javascript">
var amountNotice = 0;
function notice(options)
{
amountNotice = parseInt(options);
calculateTotal();
}
function calculateTotal()
{
totalAmount = amountNotice;
document.getElementById("total").value = totalAmount.toFixed(2);
}
function toggle(chkbox, group, associatedValues)
{
var visSetting;
if (chkbox.checked == true)
document.getElementById(group).style.display = "inline";
else
{
document.getElementById(group).style.display = "none";
uncheckRadio(associatedValues);
}
document.getElementById(group).style.display = visSetting;
}
function uncheckRadio(associatedValues)
{
for(var i = 0; i < document.getElementById(associatedValues).length; i++)
{
if (associatedValues[i].checked == true)
associatedValues[i].checked == false;
}
calculateTotal();
}
</script>
<style type="text/css">
#groupNotice {display: none}
</script>
.
.
<input type="button" onClick="calculateTotal()" value="Calculate"><br>
<div id="groupNotice">
<b>Required Notice</b>:
<input type="radio" name="Note" onClick="notice(this.value)" value="0"> None
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Day ($2)
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Call ($2)<br>
</div>
<form name="CostEstimate" method="post" action="calculator.php">
<input type="checkbox" onclick="toggle(this, 'groupNotice', 'Note'); display('groupNotice','inline')" name="Notice" value=""> Notice
</form>
Everything works except for my uncheckRadio function - not sure if I am identifying the elements correctly, or if I need a totally new approach. My thinking is that the function must be accessed by the checkbox onClick call. Previously I had tried calling uncheckRadio from the notice function before I recognized is was not an appropriate location. Any assistance is greatly appreciated. - c Similar TutorialsSo I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body>
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" class="disabled"/><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
Hello all. Complete newbie to this and to be quite honest, completely out of my depth. Ok, I have the following set up on my page - the page essentially uses three different search methods to bring back data in a gridview. 1. A cascading drop down list (ddlBuyer, ddlSub, ddlProd) and an associated radio button radBuyer. 2. An autocomplete textbox (tbxProdAC) that sources product information and an associated radio button (radProd) 3. A text box whereby users specify the number of products they wish to see and (txtHowMany) a subsequent sub category radio button list that breaks the products down further (radTopx) What I would like to do is essentially make the page so that a user can only user one of the above methods and the radio is focused according to what the user first specifies. For example, if they wish to use the ddl method, they should click ddlBuyer, ddlSub and ddlProd and the focus is placed upon the radBuyer. Along side of this, any information that may have been entered into tbxProdAC or txtHowMany is cleared. Alternatviely, should a user use the drop down method then wish to use the third method specified above, once a user clicks in txtHowMany, the ddl should revert back to their original values. I would like to achieve this in the c# code behind and I currently have the following code on my page load event/ I have got to the point where I am going round in circles (mainly because I don't know what I am doing!) so I would appreciate a few pointers. Code: ddlProd.Attributes.Add("onchange", "return SetRadioFocus('" + radBuyer.ClientID + "');");
radTopx.Attributes.Add("onclick", "return SetRadioFocus('" + radTopx.SelectedItem + "');");
tbxProdAC.Attributes.Add("onclick", "return SetRadioFocus('" + radProd.ClientID + "');");
ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", @"
function SetRadioFocus(target)
{
document.getElementById(target).checked = true;
}"
, true);
If someone can help me, I would be extremely grateful and it would save me from smashing my head further into my desk. Please excuse my ignorance, brand spanking new to this and feeling more than a little thick. I am having trouble with figuring a way to set my loop up to reset values of the different coin values. Example, when I put in 78, and click calculate, it tells you how much of each coin would be given back. My problem is that I set it up and run it, but when I put different values in back to back to calculate, some of the fields don't reset. I just need some ideas or logic behind what I need to do. Code: var change_out = function(){
do {
var money = document.getElementById("cents").value;
if (money >= 25)
{
var quarters = parseInt(money / 25);
var foo = parseInt(money - (quarters * 25));
document.getElementById("quarters").value = quarters;
if (foo >= 10)
{
var left = parseInt(foo / 10);
var wow = parseInt(foo - (left * 10));
document.getElementById("dimes").value = left;
if(wow==0)return;
if (wow >= 5)
{
var dumb = parseInt(wow / 5);
var pop = parseInt(wow - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
}else{document.getElementById("pennies").value = wow;}
}else if (foo >= 5){
var dumb = parseInt(foo / 5);
var pop = parseInt(foo - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
}else{document.getElementById("pennies").value = foo;}
}else if (money >= 10){
var left = parseInt(money / 10);
var wow = parseInt(money - (left * 10));
document.getElementById("dimes").value = left;
if (wow > 5){
var dumb = parseInt(wow / 5);
var pop = parseInt(wow - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
document.getElementById("quarters").value = "";
}else{document.getElementById("pennies").value = wow;}
}else if (money >= 5){
var dumb = parseInt(money / 5);
var pop = parseInt(money - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
document.getElementById("quarters").value = "";
document.getElementById("dimes").value = "";
}else{
document.getElementById("pennies").value = money;
document.getElementById("quarters").value = "";
document.getElementById("dimes").value = "";
document.getElementById("nickels").value = "";
}
}while(isNaN(money))}
I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script>
function alertValues(){
}
</script>
<input type="checkbox" class ="normal2" value="131971" name="list[]" >
<input type="checkbox" class ="normal2" value="131973" name="list[]" >
<input type="checkbox" class ="normal2" value="131975" name="list[]" >
<input type="checkbox" class ="normal2" value="131977" name="list[]" >
<input type="button" onClick="alertValues()"
hi can someone help me on my code on javascript sory im a newbie can you check this and help me what i need to do to add all the radio botton and check box. i already finish the add formula on the checkbox but i do not know how to add the two selected radio buttons to my checkbox buttons help please... for example: O selected is 80 O 60 O 60 O selected is 15 O 15 O 25 chkbox 22 chkbox 30 chkbox 8 Code: function Compute(form)
{
if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value; <---- the value of this is 80
else if(form.radio1[1].checked)
form.text1.value=form.radio1[1].value; <---- 60
else if(form.radio1[2].checked)
form.text1.value=form.radio1[2].value; <---- 60
else if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value; <---- 15
else if(form.radio2[1].checked)
form.text1.value=form.radio2[1].value; <---- 15
else if(form.radio2[2].checked)
form.text1.value=form.radio2[2].value; <---- 25
var a=0;
if(form.chk1.checked) <----22
a = a + eval(form.chk1.value);
if(form.chk2.checked) <----30
a = a + eval(form.chk2.value);
if(form.chk3.checked) <----8
a = a + eval(form.chk3.value);
if(form.chk1.checked && form.chk2.checked)
a = eval(form.chk1.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk3.value);
if(form.chk2.checked && form.chk1.checked)
a = eval(form.chk2.value) + eval(form.chk1.value);
if(form.chk2.checked && form.chk3.checked)
a = eval(form.chk2.value) + eval(form.chk3.value);
if(form.chk3.checked && form.chk1.checked)
a = eval(form.chk3.value) + eval(form.chk1.value);
if(form.chk3.checked && form.chk2.checked)
a = eval(form.chk3.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk2.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk2.value) + eval(form.chk3.value);
form.text1.value=a;
}
Hello, After pulling out all my hairs, I am seeking some help with a JS validation script which would be for a case where we have multiple radio buttons which required a response from user and as a additional case if certain radio option is selected user should select one or more options listed as check boxes under that specific radio button. I have attached an image showing sample scenario with this post. If someone has an Idea how to to do please sail me thru. I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery I have the following code working with the checkbox options but once I added a drop down menu with values, it doesn't calculate it. I've done some different things to try to add the drop down to the function but nothing would work that I've tried so far. I have it setup so when a box is unchecked, that option is taken off the price, the drop down should do the same to switch between the options price. Thanks for the help! Code: <script language="javascript">
totalOptions = 0;
function calculateTotalOptions(thisCheckbox){
if (thisCheckbox.checked)
{
totalOptions += parseFloat(thisCheckbox.value);
} else {
totalOptions -= parseFloat(thisCheckbox.value);
}
document.getElementById("totalOptions").value = "$" + totalOptions + ".00";
}
</script>
<form name="Options" >
<table width="765" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="8" align="center" bgcolor="#FFFFFF">Please select which model you would like to price and then add your optional equipment.</td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFFFFF"><strong>Available on these models</strong></td>
<td width="85" align="center" bgcolor="#FFFFFF">Most Popular Options</td>
<td width="97" align="center" bgcolor="#FFFFFF">Option Code</td>
<td width="192" align="center" bgcolor="#FFFFFF"><strong>Optional Equipment</strong></td>
<td width="61" align="center" bgcolor="#FFFFFF"><strong>Price</strong></td>
<td width="149" align="center" bgcolor="#FFFFFF"><strong>Add Option</strong></td>
</tr>
<tr>
<td width="58" align="center"><p><strong>SR 125<br />
</strong></p></td>
<td width="58" align="center"><p><strong>SR 225<br />
</strong></p></td>
<td width="58" align="center"><p><strong>SR 325<br />
</strong></p></td>
<td colspan="5" align="right"><strong>Select Base Model:
</strong> <select name="model" id="model">
<option value="0.00" selected onclick="calculateTotalOptions(this);">--------</option>
<option value="-6995.00" onclick="calculateTotalOptions(this);">SR 125 Standard</option>
<option value="-7495.00" onclick="calculateTotalOptions(this);">SR 125 H.D.</option>
<option value="7995.00" onclick="calculateTotalOptions(this);">SR 125 S.D.</option>
<option value="8495.00" onclick="calculateTotalOptions(this);">SR 225 Standard</option>
<option value="8995.00" onclick="calculateTotalOptions(this);">SR 225 H.D.</option>
<option value="9595.00" onclick="calculateTotalOptions(this);">SR 225 S.D.</option>
<option value="9995.00" onclick="calculateTotalOptions(this);">SR 325 Standard</option>
<option value="10495.00" onclick="calculateTotalOptions(this);">SR 325 H.D.</option>
<option value="10995.00" onclick="calculateTotalOptions(this);">SR 325 S.D.</option>
</select></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">SR-ES</td>
<td bgcolor="#FFFFFF">•Electric start </td>
<td bgcolor="#FFFFFF">$345.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="345.00" onclick="calculateTotalOptions(this);"> </td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td>SR-OCP</td>
<td>•Operator convience package; includes tach, hour, lube meter, hydraulic pressure gauge and bottle holder</td>
<td>$125.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="125.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-EZM</td>
</table></td>
<td bgcolor="#FFFFFF">•EZ maintance hydraulic package; includes temperature and fill sight guage and quickdrain ball valve</td>
<td bgcolor="#FFFFFF">$100.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="100.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-6W</td>
</table></td>
<td>•Six way wedge with on board storage</td>
<td>$495.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-JLL</td>
</table></td>
<td bgcolor="#FFFFFF">•Jointed log lift</td>
<td bgcolor="#FFFFFF">$495.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-SEGTR</td>
</table></td>
<td>•Segmented tire for spotting includes spotting hitch</td>
<td>$350.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="350.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-MGST</td>
</table></td>
<td bgcolor="#FFFFFF">•Motor guard with saddle for segmented tire</td>
<td bgcolor="#FFFFFF">$95.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="95.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-MG</td>
</table></td>
<td>•Motor guard w/o saddle</td>
<td>$75.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="75.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-SPRTR</td>
</table></td>
<td bgcolor="#FFFFFF">•Spare tire and holder</td>
<td bgcolor="#FFFFFF">$250.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="250.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-HOC</td>
</table></td>
<td>•Hydraulic oil cooler</td>
<td>$795.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="795.00" onclick="calculateTotalOptions(this);">
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-GRLP</td>
</table></td>
<td bgcolor="#FFFFFF">•Grip Rightâ„¢ log points (each additional point)</td>
<td bgcolor="#FFFFFF">$20.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="20.00" onclick="calculateTotalOptions(this);">
</td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-HDF</td>
</table></td>
<td>•Heavy duty fenders</td>
<td>$145.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="145.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-LP</td>
</table></td>
<td bgcolor="#FFFFFF">•Light package</td>
<td bgcolor="#FFFFFF">$195.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="195.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-38LO</td>
</table></td>
<td>•38" log opening *includes 2 1/2" cylinder rod </td>
<td>$995.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="995.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td colspan="8" align="center" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td> </td>
<td> </td>
<td> </td>
<td><strong>TOTAL:</strong></td>
<td><input type="text" id="totalOptions" readonly>
</td>
</tr>
</table>
</form>
My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log. Can anyone help me? Thanks. Code: <html>
<head>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
$ ("#t").submit(function() {
var g = showCheckedValues();
console.log(g);
alert(g);
});
function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
}}
</script>
<body>
<form id="t">
<input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
<input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
<input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
<input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
<input type="submit" name="save-changes"></input>
</form>
</body>
</html>
Hi all, I am in the process of developing a calculator for some of my colleagues to use. One of the variables within the calculations is called PMH. I want to determine the value of PMH based on which checkboxes are ticked. Each checkbox has a different value. If the checkbox is not ticked, then the value of each option is 1 and obviously more than one checkbox may be ticked. I have created the checbox code: Code: <td><input type="checkbox" name="PMH" value="1.6" /> Smoker<br />
<input type="checkbox" name="PMH" value="0.4" /> CCF<br />
<input type="checkbox" name="PMH" value="0.5" /> Pulmonary Oedema / Cirrhosis<br />
<input type="checkbox" name="PMH" value="0.8" /> COAD<br /></td>
but I have no idea on how to calculate what I need for var PMH. Can someone guide me as to what I need to do please? Cheers, mads Hello I am very new to Java Script. I am working on a website which requires me to use it. The site is selling items that are priced depending on the size. There are 6 fixed sizes for the width and the length can come in any size 1 through 200. So that will be user input on the length and radio buttons on the width. I am trying to have the user put in the length and click a radio button for width and then calculate the price by multiplying them. I am trying to get 1 price to display right now just to test it but I can't figure out why it isn't working. Again I am fairly new at this so there might be multiple problems with my code. Thanks in advance for the help. Code: <script type = "text/javascript">
function buttoncheck(){
var selection1 = document.menu.selection;
if (selection1 == 60) {choice1()}
if (selection1 == 50) {choice2()}
if (selection1 == 25) {choice3()}
if (selection1 == 10) {choice4()}
if (selection1 == 4) {choice5()}
if (selection1 == 2) {choice6()}
function choice1(){
var len = Number(document.getElementById("length").value) || 0;
var area1 = selection1 * len;
var cost = 0;
if (area1 == 60) { cost = 60}
return cost;
document.getElementById("TotalCost").innerHTML = "$" + cost.toFixed(2);
}
Code: <h4 class="auto-style3">Pricing Calculator:</h4>
<p>
<form method="post">
<div class="auto-style1">
<span class="auto-style2">LENGTH:</span>
<input name="length" type="text" id="length" /><br />
</form>
<div class="auto-style1">
<form name="menu">
<input type="radio" value="60" name="selection">60 inch</input>
<input type="radio" value="50" name="selection">50 inch</input>
<input type="radio" value="25" name="selection">25 inch</input>
<input type="radio" value="10" name="selection">10 inch</input>
<input type="radio" value="4" name="selection">4 inch label</input>
<input type="radio" value="2" name="selection">2 inch label</input>
</form>
</div>
<p class="auto-style1">
<input type="button" value="Calculate" onClick="buttoncheck()" </p>
</p>
<p> </p>
<span id="TotalCost"></span><script type = "text/javascript">
document.getElementById("TotalCost").innerHTML = "Total cost is $" + cost.toFixed(2);
Pardon my rookie question as I know little about code, but have managed with some help to get a basic setup of what I want, just not quite the end product. I have a pricing page that is broken into multiple categories per phase. I want a customer to be able to select my checkboxes and hit a button that will display a rolled up total. I also want it to be able to re-calculate the totals if a box is subsequently unchecked. I have browsed and searched the form to get the code to where it is now but need help to finish it. Thank you in advance, Here is a bit of the code I am using so you have an example" Code: <div class="item"> <h1>Phase 1: Structurals</h1> </div> <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Engineering" /> Phase 1: Complete w/ Engineering <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Out Engineering" /> Phase 1: Complete w/ Out Engineering <input name="Phase 1" type="checkbox" value="10~~Foundation: Monoslab" /> Foundation: Monoslab <input name="Phase 1" type="checkbox" value="20~~Foundation: Post Tension" /> Foundation: Post Tension <input name="Phase 1" type="checkbox" value="30~~Foundation: Stemwall" /> Foundation: Stemwall <input name="Phase 1" type="checkbox" value="40~~Foundation: Basement" /> Foundation: Basement <input name="Phase 1" type="checkbox" value="40~~Framing w/ Engineering" /> Framing w/ Engineering <input name="Phase 1" type="checkbox" value="40~~Framing w/ out Engineering" /> Framing w/ out Engineering <input name="Phase 1" type="checkbox" value="40~~Framing Hardware (with Engineering ONLY)" /> Framing Hardware (with Engineering ONLY) <div class="item"> <h1>Phase 2: Mechanicals</h1> </div> <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Engineering" /> Phase 2: Complete w/ Engineering <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Out Engineering" /> Phase 2: Complete w/ Out Engineering <input name="Phase 2" type="checkbox" value="10~~Plumbing" /> Plumbing <input name="Phase 2" type="checkbox" value="20~~HVAC" /> HVAC <input name="Phase 2" type="checkbox" value="30~~Electrical" /> Electrical <div class="item"> <h1>Phase 3: Exterior Finishes</h1> </div> <input name="Phase 3" type="checkbox" value="0~~Phase 3: Complete" /> Phase 3: Complete <input name="Phase 3" type="checkbox" value="0~~Housewrap" /> Housewrap <input name="Phase 3" type="checkbox" value="10~~Brick" /> Brick <input name="Phase 3" type="checkbox" value="20~~Stone" /> Stone <input name="Phase 3" type="checkbox" value="30~~Vinyl Siding" /> Vinyl Siding <input name="Phase 3" type="checkbox" value="30~~Cementitious Siding" /> Cementitious Siding <input name="Phase 3" type="checkbox" value="30~~Roofing" /> Roofing <input name="Phase 3" type="checkbox" value="30~~Windows" /> Windows <input name="Phase 3" type="checkbox" value="30~~Exterior Doors" /> Exterior Doors <div class="item"> <h1>Phase 4: Interior Finishes</h1> </div> <input name="Phase 4" type="checkbox" value="0~~Phase 4: Complete" /> Phase 4: Complete <input name="Phase 4" type="checkbox" value="0~~Insulation" /> Insulation <input name="Phase 4" type="checkbox" value="10~~Drywall" /> Drywall <input name="Phase 4" type="checkbox" value="20~~Paint" /> Paint <input name="Phase 4" type="checkbox" value="30~~Interior Trim" /> Interior Trim <input name="Phase 4" type="checkbox" value="30~~Interior Doors" /> Interior Doors <input name="Phase 4" type="checkbox" value="30~~Mirrors" /> Mirrors <input name="Phase 4" type="checkbox" value="20~~Shelving" /> Shelving <input name="Phase 4" type="checkbox" value="30~~Bath Accessories" /> Bath Accessories <input name="Phase 4" type="checkbox" value="30~~Countertops" /> Countertops <input name="Phase 4" type="checkbox" value="30~~Cabinets" /> Cabinets <input name="Phase 4" type="checkbox" value="30~~Shower Surrounds" /> Shower Surrounds <input name="Phase 4" type="checkbox" value="30~~Shower Enclosures" /> Shower Enclosures <div class="item"> <h1>Phase 5: Flooring</h1> </div> <input name="Phase 5" type="checkbox" value="0~~Flooring" /> Flooring I keep getting 28 when I am suppose to get 22 because of Order of Operations. Code: <html>
<head>
<title>Movie</title>
<script type="text/javascript">
function ticketOrder()
{
var cost;
var ticket;
if(document.movieTicket.radTicket[0].checked)
{
ticket=document.movieTicket.radTicket[0].value;
ticket=parseInt(ticket);
cost=cost*ticket;
}
if(document.movieTicket.radTicket[1].checked)
{
ticket=document.movieTicket.radTicket[1].value;
ticket=parseInt(ticket);
cost=cost*ticket;
}
if(document.movieTicket.radReward[0].checked)
{
cost=document.movieTicket.radReward[0].value;
cost=parseInt(cost);
}
else if(document.movieTicket.radReward[1].checked)
{
cost=document.movieTicket.radReward[1].value;
cost=parseInt(cost);
}
if(document.movieTicket.chkPopcorn.checked)
{
var popcorn=document.movieTicket.chkPopcorn.value;
popcorn=parseInt(popcorn);
cost=cost+popcorn;
}
if(document.movieTicket.chkSoda.checked)
{
var soda=document.movieTicket.chkSoda.value;
soda=parseInt(soda);
cost=cost+soda;
}
if(document.movieTicket.chkCandy.checked)
{
var candy=document.movieTicket.chkCandy.value;
candy=parseInt(candy);
cost=cost+candy;
}
alert(cost*ticket);
}
</script>
</head>
<body>
<div id="Header">
<h2>The Chicago Movie Palace</h2>
</div>
<form name="movieTicket">
How many tickets would you like to order?<br />
1 Ticket<input type="radio" name="radTicket" value="1" /><br />
2 Tickets<input type="radio" name="radTicket" value="2" /><br />
3 Tickets<input type="radio" name="radTicket" value="3" /><br />
4 Tickets<input type="radio" name="radTicket" value="4" /><br />
5 Tickets<input type="radio" name="radTicket" value="5" /><br />
Are you a member of our theater?<br />
Yes<input type="radio" name="radReward" value="8" /><br />
No<input type="radio" name="radReward" value="10" /><br />
Would you like any food or drinks with your movie?<br />
Popcorn ($4)<input type="checkbox" name="chkPopcorn" value="4" /><br />
Soda ($3)<input type="checkbox" name="chkSoda" value="3" /><br />
Candy ($3)<input type="checkbox" name="chkCandy" value="3" /><br />
Which movie would you like to see?
<select name="selUpcomingMovie">
<option value="Immortals">Immortals</option>
<option value="J Edgar">J Edgar</option>
<option value="Sherlock Holmes:A Game of Shadows" >Sherlock Holmes:A Game of Shadows</option>
</select>
<p><input type="button" name="btnSubmit" value="Order Tickets" onclick="ticketOrder()" /></p>
</form>
</body>
</html>
Hi, i feel kinda stupid asking this, but im kinda lost. I want to add up multiple values of groups of checkboxes. I managed to add up the values, but making it so that only one checkbox per group can be enabled at any time gives me a headache. Here is what i got so far, any hints to how to make it work would be really cool. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
function Summe()
{
sum = 0;
if(document.Formular.m1.checked)
{
sum = sum + (1 * document.Formular.m1.value);
}
if(document.Formular.m2.checked)
{
sum = sum + (1 * document.Formular.m2.value);
}
if(document.Formular.m3.checked)
{
sum = sum + (1 * document.Formular.m3.value);
}
if(document.Formular.m4.checked)
{
sum = sum + (1 * document.Formular.m4.value);
}
if(document.Formular.m5.checked)
{
sum = sum + (1 * document.Formular.m5.value);
}
if(document.Formular.m6.checked)
{
sum = sum + (1 * document.Formular.m6.value);
}
if(document.Formular.m7.checked)
{
sum = sum + (1 * document.Formular.m7.value);
}
if(document.Formular.m8.checked)
{
sum = sum + (1 * document.Formular.m8.value);
}
document.Formular.black.value = sum;
}
</script>
<form name="Formular">
<INPUT TYPE="TEXTBOX" NAME="black" VALUE="" SIZE="3"> <br>
grp1<br>
<input type="checkbox" Name="m1" Value="411" id="411" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m2" Value="412" id="412" onClick="javascript:Summe()"> <br><br>
grp2<br>
<input type="checkbox" Name="m3" Value="421" id="421"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m4" Value="422" id="422"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m5" Value="423" id="423" onClick="javascript:Summe()"> <br> <br>
grp3 <br>
<input type="checkbox" Name="m6" Value="431" id="431" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m7" Value="432" id="432" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m8" Value="433" id="433" onClick="javascript:Summe()"> <br> <br>
</form>
</body>
</html>
I was wondering if anyone could help me with getting this working. I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus. I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B]. My code for javascript function and html table are below: Code: function calculate(textID){
var table = document.getElementById('course'); //id of table
var rowCount = table.rows.length;
var array = []; //array to hold the values
var c = 0;
dmenus = document.getElementByTagName("select"); //get the drop down menus
for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
var row = table.rows[a];
var check = row.cells[0].childNodes[0];
if(null != check && true == check.checked){
for(var b = 0; b < dmenus.length; b++){
val = dmenus[b].options[dmenus[b].selectedIndex].value;
array[c] = val; //set index of array to equal value of dropdown box
c++;
}
}else{
b++;
}
}
Html code for table: Code: <table id="course">
<tr>
<td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
<th style="color:white">Course Title</th>
<th style="color:white">Credits</th>
<th style="color:white">Grade</th>
</tr>
<tr>
<td><input type="checkbox" name="tick" id="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option...</select></td>
<td>
<select name="grade" id="grade">
<option...</td>
It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks i'm trying to "post" the selected checkboxes (name and value) into a mysql database; i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work. it seems that the variable naamtest is empty (when i load a word into this var arv it does work) can someone find my error? Code: <script type="text/javascript">
function shift(which)
{
var counter = 0; // counter for checked checkboxes
var i = 0; // loop variable
var veck = "";// final url variable
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input'); // get a collection of objects with the specified 'input' TAGNAME
for (i=0; i < input_obj.length; i++){ // loop through all collected objects
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){ // if input object is checkbox and checkbox is checked then ...
counter++; // ... increase counter
var valcheck = input_obj[i].value; // waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck); // absolute rekenwaarde van variable maken
beginsaldo -= test; //beginsaldo verminderen met de checkbox value
if (counter > 0){
var naam = input_obj[i].name + ' ';
var val = input_obj[i].value + ' ';
namen = namen + naam;
valu = valu + val;
namen_array = namen.split(" ");
va_array = valu.split(" ");
var naamtest = namen_array;
}}}
if (counter > 10){
alert ("u mag maar 10 renners selecteren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else{
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
if ( tds[0].getElementsByTagName("input")[0] == which )
{
tds[2].innerHTML = tds[0].innerHTML;
tds[0].innerHTML = " ";
tds[3].innerHTML = tds[1].innerHTML;
tds[1].innerHTML = " ";
tds[2].getElementsByTagName("input")[0].checked = true;
} else {
// this code is optional!!
tds[0].innerHTML = tds[2].innerHTML;
tds[2].innerHTML = " ";
tds[1].innerHTML = tds[3].innerHTML;
tds[3].innerHTML = " ";
tds[0].getElementsByTagName("input")[0].checked = false;
}
function setValue()
{
var arv = naamtest.join();
// This line converts js array to String
document.f2.arv.value=arv;
// This sets the string to the hidden form field.
}}}
</script>
Hi, here is what I am trying to do, mind if I sound simple this is my first major javascript attempt. You click the checkbox and it changes a link. You click the checkbox again and it changes it back. So you have a page with a link : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a> and a checkbox : <a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p> Clicking the checkbox runs the javascript function ChangeTarget(). Here is what I want the javascript to do: Code: 1. Write current pay value to variable 2. Compare variable to paypal link -3. change to clickbank link -else change to paypal link. Here is the code I have tried that doesnt work: Code: <script type="text/javascript">
var link = document.getElementById('pay');
function changeTarget()
if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN")
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
else
document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN";
</script>
Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it. I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time. Code: //WORKING CODE
<script type="text/javascript">
function changeTarget()
{
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
}
</script>
Hey javascript newbie, Im trying to figure out how to add different radio if its selected or not example: Radio_Button1 value="5": Selected Radio_Button2 value="15": Not Selected Radio_Button3 value="25": Selected Radio_Button4 value="35": Selected var addingitup = ??? and im lost???? I have some asp:radiobutton lists that need to update a label with the sum of their values each time a user selects a new value. I am brand new to javascripting and would like some insight on how to get this done. I have inserted my code below. Code: <asp:Label runat="server" Text="Greeting:" /> <asp:Label runat="server" ForeColor="Red" ID="lbl_GreetingScore" Text="0" /> <asp:RadioButtonList ID="rdb1_1" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected="True" Text="N/A" Value="4" /> <asp:ListItem Text="Yes" Value="4" /> <asp:ListItem Text="No" Value="0" /> </asp:RadioButtonList> |
|||||||