I'm attempting to make a code that will display the divs when checked and also add the values of the checkboxes together. I've managed to come up with this but now I want to make some of the checkboxes checked and their values added together by default. I can make the checkbox checked, however, I need the value to be added by default as well. Any help would be appreciated. Here is my code:
a
This is the first paragraph
This is the second paragraph
This is the third paragraph
<form name="formex">
<input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"> $10.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"> $12.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"> $1.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2"> $2.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24"> $24.00<br>
<br>
<input id="total" type="text" name="total">
</form>
My script
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("total")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function showPara()
{
document.getElementById("first").style.display=(document.formex.one.checked) ? "inline" : "none";
document.getElementById("second").style.display=(document.formex.two.checked) ? "inline" : "none";
document.getElementById("third").style.display=(document.formex.three.checked) ? "inline" : "none";
return true;
}
</script>
jsFiddle: http://jsfiddle.net/TCZ6t/1/
You should be able to just add the attribute "checked" to the end of the tag to have it checked by default. In other words, if I wanted $10 to be checked by default I would just change the tag to:
<input checked onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10" checked> $10.00<br>
You could just loop all the checked checkboxes and call the add method like
var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]');
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
add(els[i])
}
}
Demo:
var total = document.getElementById("total");
function clickCh(caller) {
if (caller.checked) {
add(caller)
} else {
subtract(caller)
}
}
function add(caller) {
total.value = total.value * 1 + caller.value * 1
}
function subtract(caller) {
total.value = total.value * 1 - caller.value * 1
}
function showPara() {
document.getElementById("first").style.display = (document.formex.one.checked) ? "inline" : "none";
document.getElementById("second").style.display = (document.formex.two.checked) ? "inline" : "none";
document.getElementById("third").style.display = (document.formex.three.checked) ? "inline" : "none";
return true;
}
var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]');
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
add(els[i])
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first" style="display:none;">This is the first paragraph</div> <br />
<div id="second" >This is the second paragraph</div> <br />
<div id="third" style="display:none;">This is the third paragraph</div> <br />
<form name="formex">
<input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"/> $10.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"/> $12.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"/> $1.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2" checked /> $2.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24" checked /> $24.00<br/>
<br/>
<input id="total" type="text" name="total"/>
</form>
Related
Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.
Just add "script" tag in your html before function start which indicate javascripts code.
I have a form with checkboxes. Max 4 items needs to be selected. If selecting more then an Alert pops up. I have it working when I use the same name="" but that really needs to be different. Anyone knows how to do this?
The script I have: (ckb needs to be ckb1 + ckb2 + ckb3...)
function chkcontrol(j) {
var total=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
total =total +1;}
if(total > 4){
alert("Selecteer a.u.b. maximaal 4 workshops")
document.form1.ckb[j].checked = false ;
return false;
}
}
}
My form html code:
<form enctype="application/x-www-form-urlencoded" method="post" name="form1">
<span>Workshops selection: (max 4)</span><br><br>
<input type="checkbox" name="ckb1" value="blabla first" onclick='chkcontrol(0)'; /> blabla first<br>
<input type="checkbox" name="ckb2" value="blabla 2" onclick='chkcontrol(1)'; /> blabla 2<br>
<input type="checkbox" name="ckb3" value="blabla 3" onclick='chkcontrol(2)'; /> blabla 3<br>
<input type="checkbox" name="ckb4" value="blabla 4" onclick='chkcontrol(3)'; /> blabla 4<br>
<input type="checkbox" name="ckb5" value="blabla 5" onclick='chkcontrol(4)'; /> blabla 5<br>
<input type="checkbox" name="ckb6" value="blabla 6" onclick='chkcontrol(5)'; /> blabla 6<br>
<input type="checkbox" name="ckb7" value="blabla 7" onclick='chkcontrol(6)'; /> blabla 7<br>
<input class="btn" class="cursor" name="Sent" type="submit" value="Sent" />
</form>
My fiddle: https://jsfiddle.net/usq2aeLL/1/
Working one but needs different name="xxx": https://jsfiddle.net/usq2aeLL/2/
Use a common class to select the elements instead
<input type="checkbox" name="ckb1" class="myBox" value="blabla first" />
and then
function chkcontrol() {
var total = 0;
var elems = document.querySelectorAll('.myBox');
for (var i = 0; i < elems.length; i++) {
if (elems[i].checked) {
total = total + 1;
}
if (total > 4) {
alert("Selecteer a.u.b. maximaal 4 workshops")
elems.checked = false;
return false;
}
}
}
FIDDLE
Preferably you'd swap out the inline event handlers with addEventListener as well.
**I have a php page with an array of option like this... and I need to get by javascript **the index of the selected option. Above I put the code of the javascript that is not working... Any help will be appreciated!
<input type="radio" name="option[1]" value="1">
<input type="radio" name="option[1]" value="2">
<input type="radio" name="option[1]" value="3">
<input type="radio" name="option[1]" value="4">
<input type="radio" name="option[2]" value="1">
<input type="radio" name="option[2]" value="2">
<input type="radio" name="option[2]" value="3">
<input type="radio" name="option[2]" value="4">
<input type="radio" name="option[3]" value="1">
<input type="radio" name="option[3]" value="2">
<input type="radio" name="option[3]" value="3">
<input type="radio" name="option[3]" value="4">
...
Can anyone help me?
I am trying something like this but it didn´t work
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
var index = 0;
for (var i = 0; document.forms[0].elements.length; i++)
{
if (document.forms[0].elements[i] == element)
{
index = i;
}
}
return index;
}
</script>
If I correctly understood the questuion, it can be solved like this:
$(document).on('change','input[type=radio]', function(){
alert($(this).prop('name').charAt(7));
});
Here is fiddle http://jsfiddle.net/Goodluck/ynkgr/
the name attribute is used for group the radio buttons, you have to use the id attribute to access the control asking if it's checked.
Example
<html>
<head>
</head>
<body>
<form id="frmTest">
<input type="radio" name="option[1]" id="option1-item1" value="1" >
<input type="radio" name="option[1]" id="option1-item2" value="2" >
<input type="radio" name="option[1]" id="option1-item3" value="3" >
<input type="radio" name="option[1]" id="option1-item4" value="4" >
<input type="radio" name="option[2]" id="option2-item1" value="1" >
<input type="radio" name="option[2]" id="option2-item2" value="2" >
<input type="radio" name="option[2]" id="option2-item3" value="3" >
<input type="radio" name="option[2]" id="option2-item4" value="4" >
<input type="radio" name="option[3]" id="option3-item1" value="1" >
<input type="radio" name="option[3]" id="option3-item2" value="2" >
<input type="radio" name="option[3]" id="option3-item3" value="3" >
<input type="radio" name="option[3]" id="option3-item4" value="4" >
</form>
<input type="button" onclick="validateForm(document.getElementById('frmTest'))" />
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
return element.id;
}
</script>
</body>
</html>
You forgot to check the condition in this line:
(the loop in function clickedElm)
for (var i = 0; document.forms[0].elements.length; i++)
So, you enter in an infinite loop.
the correct line:
for (var i = 0; i < document.forms[0].elements.length; i++)
I am trying to calculate the values of radio buttons and checkboxes.
I have the radio buttons working as required but cannot get the script right for the checkboxes.
I want the check boxes to have a sub total (which is working fine) and then have that subtotal added to the calculation of the radio buttons. Below is what I have so far.
Any suggestions would be appreciated.
Thanks.
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p><input id="rdo_1" type="radio" value="3" name="price3" onClick="DisplayPrice(this.value);"><label for="ra1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price3" onClick="DisplayPrice(this.value);"><label for="ra2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price3" onClick="DisplayPrice(this.value);"><label for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01" value="300"/><label for="check01">Check 1</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG" id="check02" value="200"/><label for="check02">Check 2</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG" id="check03" value="200"/><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly" >
</form>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
</script>
<hr>
<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for( i = 0; i < document.form4.price4.length; i++ ){
val4 = document.form4.price4[i].value;
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
In Javascript if there is single texbox of a specific name then length function will be return undefined.
Here you can do two things.
First there is only single field of subtotal so u can assign value direct to val4 like given below
val4 = document.form4.price4.value;
Second If you want to run for loop then
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
Edited
In function
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
finalResult();
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function finalResult(){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
i hope it will be work for you
thanks
In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value
Try this code... same code with some modifications
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
for="radio1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
for="radio2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p>
<input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
value="300" /><label for="check01">Check 1</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
id="check02" value="200" /><label for="check02">Check 2</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
id="check03" value="200" /><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">
Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly">
</form>
<p>
<label for="valueTotal">
Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("valueTotal")
var result = document.getElementById("price4")
function clickCh(caller)
{
if (caller.checked)
{
add(caller)
} else
{
subtract(caller)
}
}
function add(caller) { result.value = total.value * 1 + caller.value * 1 }
function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
</script>
<hr>
<script type="text/javascript">
function DisplayPrice(price)
{
var val1 = 0;
for (i = 0; i < document.form1.price.length; i++)
{
if (document.form1.price[i].checked == true)
{
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2.price2.length; i++)
{
if (document.form2.price2[i].checked == true)
{
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3.price3.length; i++)
{
if (document.form3.price3[i].checked == true)
{
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4.price4.length; i++)
{
val4 = document.form4.price4[i].value;
}
var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value = sum;
}
</script>
Thank you. hope it will work
Hi here is the codes bellow, I've tried many things but I couldnt get value of selected radio button.As you can see I need to get that value for diffrent situations.
<div style="display: inline-block">
<div>
Log Out<span> Welcome </span>YS User 1 noName </div>
<br />
<br />
<br />
<br />
<input type="button" onclick="submitCreate();" value="New Survey" /><br />
<input type="button" onclick="submitEdit();" value="Edit Survey" /><br />
<input type="button" onclick="submitDelete();" value="Delete Survey" /><br />
<input type="button" onclick="submitPreview();" value="Preview Survey" />
</div>
<div style="display: inline-block">
<div>
<table class="MyTable"><thead><tr class="columnHead"><th scope="col"></th><th scope="col">CreatedBy</th><th scope="col">Created Date</th><th scope="col">Is Running</th></tr></thead><tbody><tr><td> <input name="selected" id="1"
type="radio" value="1" /></td><td>1</td><td>12/12/2011 3:43:57 PM</td><td>False</td></tr><tr class="altRow"><td> <input name="selected" id="2"
type="radio" value="2" /></td><td>1</td><td>12/13/2011 4:42:37 PM</td><td>False</td></tr><tr><td> <input name="selected" id="3"
type="radio" value="3" /></td><td>1</td><td>12/13/2011 6:27:38 PM</td><td>False</td></tr></tbody></table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// var value = $$('input[name=selected]:checked')[0].get('value');
// var selectFoo;
// $$('input[name=selected]').each(function (el) {
// if (el.checked == true) {
// selectFoo = el.value;
// }
// });
function getCheckedValue(radioObj) {
if (!radioObj)
return "";
var radioLength = radioObj.length;
if (radioLength == undefined)
if (radioObj.checked)
return radioObj.value;
else
return "";
for (var i = 0; i < radioLength; i++) {
if (radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
};
function submitCreate() {
var adress = "/User/CreateSurvey/";
document.location = adress;
};
function submitEdit() {
var adress = "/Den/Index/" + getCheckedValue('selected');
document.location = adress;
};
function submitDelete() {
var adress = "/User/DeleteSurvey/" + getCheckedValue('selected');
document.location = adress;
};
function submitPreview() {
var adress = "/User/PreviewSurvey/" + getCheckedValue('selected');
document.location = adress;
};
</script>
You can use document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. Loop through those elements to check which is checked.
Here is an example of how to get the value of the checked button from a set of radio buttons with the name "selected":
<html>
<head>
<script type="text/javascript">
function get_radio_value() {
var inputs = document.getElementsByName("selected");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
return inputs[i].value;
}
}
}
function onSubmit() {
var id = get_radio_value();
alert("selected input is: " + id);
}
</script>
</head>
<body>
<form onsubmit="onSubmit();">
<input name="selected" value="1" type="radio"/>1<br/>
<input name="selected" value="2" type="radio"/>2<br/>
<input name="selected" value="3" type="radio"/>3<br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
I choose let number of code for a required function. The one worked for me is given below from api.jquery.com. Hope this helps others.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2