This is JavaScript Code :
var clinicalStat;
var id;
var val;
var clinicalVals;
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
alert("The inital value for selected checkbox = " + checked1);
var checkedVal = $(this).val('1'); //value is change to '1'
alert("The value after checked the checkbox is = " + $(this).val());
}
});
$(":checkbox").click(function() {
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
alert("The initial value of clinicalStat = " + clinicalStat);
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
alert("Later the value is changed to = " + clinicalStat);
id = (this.id);
alert("id = " + id);
val = (this.value);
alert("val = " + val);
clinicalVals = clinicalStat + "^" + id + ":" + val;
alert("clinicalVals = " + clinicalVals);
});
This is my Checkbox code .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>
if i checked Documentation Checkbox iam getting ClinicalVal value like this clinicalVals=1^clinicalDoc:1
what my problem is how to get clinical values like this clinicalVals=1^clinicalDoc:1^1^0:0^1^0:0^1^0:0^1^0:0^1^0:0 i.e clinicalDoc checkbox is selected remaining are not selected.
if i select two checkboxes the clinicalVal has to show like this clinicalVals=1^clinicalDoc:1^1^clinicalMiss:1^1^0:0^1^0:0^1^0:0^1^0:0 i.e two checkboxes are selected remaining are not selected
Loop your all the check box's and check for checkbox is checked or not
var clinicalStat;
var id;
var val;
var clinicalVals ='';
$(":checkbox").click(function() {
//alert(" you checked");
if ($(this).is(':checked')) {
var checked1 = $(this).val(); //Inital value of checkbox is '0'
var checkedVal = $(this).val('1'); //value is change to '1'
}
});
$(":checkbox").click(function() {
clinicalVals = '';
clinicalStat = document.getElementById('clinicalStat').value; //clinicalStat(type='textbox') inital value is '0'
clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
var checkboxes = document.getElementsByClassName('clinicalCheck');
for(var i =0; i< checkboxes.length; i++){
id = checkboxes[i].id;
val = checkboxes[i].value;
if(checkboxes[i].checked){
clinicalVals += clinicalStat + "^" + id + ":" + val+"^";
}else{
clinicalVals += 1 + "^0:" + val+"^";
}
}
console.log(clinicalVals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 right2 fon">
<h6>Clinical Practice/Procedure</h6>
<hr>
<p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
<p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
<p><input type="hidden" id="appendStockistStatus" value="0"></p>
<p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
<p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
<p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
<p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
<p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
</div>
Related
i just changed my question to show my attempt at it. This is what im trying to do. The XPlevels have a set value, and using that i wanna calculate and display the price
function setprice() {
var val;
var type = document.getElementByName("XP")
if (type[0].checked)
{
var val = 200;
}
else if (type[1].checked)
{
var val = 150;
}
else if (type[2].checked)
{
var val = 100;
}
}
function Calculate() {
var FName = document.getElementById("FName");
var numppl = document.getElementById("numppl");
var Tprice = val * numppl;
window.alert(FName + ", the membership amount is: R " + BasePrice);
<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate" onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert" onclick="setprice" />Expert
<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="Calculate"/>
You can use onclick event on the Calculate Fee Button to call a JavaScript Function that checks which radio button is selected.
const calculateFee = () => {
let radioButtons = document.querySelectorAll("input");
for(let i=0; i<3; i++){
if(radioButtons[i].checked){
console.log(`Checked Radio Button is : ${radioButtons[i].value}`);
}
}
}
<input type="radio" name="XP" value="Novice" />Novice
<input type="radio" name="XP" value="Intermediate" checked />Intermediate
<input type="radio" name="XP" value="Expert" />Expert
<br />
<label for="Members">Number of members</label>
<input type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="calculateFee()"/>
This is an edit of your JS code
function setprice() {
var type = document.querySelectorAll('[name="XP"]');
if (type[0].checked) {
var val = 200;
}
else if (type[1].checked) {
var val = 150;
}
else if (type[2].checked) {
var val = 100;
}
return val;
}
function calculate() {
var fName = document.getElementById("FName");
var numppl = document.getElementById("numppl");
var val = setprice();
var tprice = val * numppl.value;
// window.alert(FName + ", the membership amount is: R " + BasePrice);
console.log(tprice);
}
<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate" onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert" onclick="setprice" />Expert
<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="calculate()" />
This example a more correct approach to what you want
On each radio button, the value is the number (unit price) to be calculated. I have added a data attribute from which to take "Type"
The input named member must be set to a minimum value so that the user cannot set a negative value.
Try this code and if you have any questions I will supplement my answer!
var radio = document.querySelectorAll('.radio');
var number = document.querySelector('.number');
var button = document.querySelector('.button');
var getval;
var datainf;
button.addEventListener('click', function () {
radio.forEach(function (el) {
if (el.checked) {
getval = +el.value;
datainf = el.getAttribute('data');
}
});
var result = getval * number.value;
console.log( 'Quantity: ' + number.value + ' / Type: ' + datainf + ' / The membership amount is: ' + result);
});
<input type="radio" class="radio" name="XP" value="200" data="Novice" />Novice
<input type="radio" class="radio" name="XP" value="150" data="Intermediate" checked />Intermediate
<input type="radio" class="radio" name="XP" value="100" data="Expert" />Expert
<br />
<label for="Members">Number of members</label>
<input type="number" class="number" name="Members" size="2" value="1" min="1" />
<input type="button" class="button" value="Calculate fee" />
my question is super basic, but I'm not super informed about javascript so I have 5 radio buttons(like rating) and I want to print the value when some of them is checked to input field. I end up to print it with alert and it works, but I want to print it in input.
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
$('.rating-star').on('click', function() {
$(this).parents('.rating').find('.rating-star').removeClass('checked'); // uncheck previously checked star
$(this).addClass('checked'); // check currently selected star
var ratingValue = $(this).attr('data-rating'); // get rating value
var ratingTarget = $(this).attr('data-target');
// set the rating value to corresponding target radio input
$('input[name="' + ratingTarget + '"][value="' + ratingValue + '"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Question...</label>
<br>
<input type="radio" name="difficulty" value="1">
<input type="radio" name="difficulty" value="2">
<input type="radio" name="difficulty" value="3">
<input type="radio" name="difficulty" value="4">
<input type="radio" name="difficulty" value="5">
<br>
<div class="rating">
<i class="rating-star" data-rating="5" data-target="difficulty"></i>
<i class="rating-star" data-rating="4" data-target="difficulty"></i>
<i class="rating-star" data-rating="3" data-target="difficulty"></i>
<i class="rating-star" data-rating="2" data-target="difficulty"></i>
<i class="rating-star" data-rating="1" data-target="difficulty"></i>
</div>
</form>
<p><input type="button" value="Get Value"></p>
<input type="text" id="radioBtn" name="printRadio">
Try on method in print script as well.
$(document).ready(function(){
$("input[type='button']").on('click',function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
//alert("Your are a - " + radioValue);
$('#radioBtn').val(radioValue);
}
});
});
How I get price and name of checked item?
var total = 0;
function test(item) {
if (item.checked) {
total += parseInt(item.value);
} else {
total -= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + " ";
}
<input type="checkbox" name="check_list[]" value="5" onClick="test(this);"><label>- Flag A</label>
<- <span class="badge">Price: 5 credits</span><br />
<input type="checkbox" name="check_list[]" value="13" onClick="test(this);"><label>- Flag B</label>
<- <span class="badge">Price: 13 credits</span><br />
<input type="checkbox" name="check_list[]" value="9" onClick="test(this);"><label>- Flag C</label>
<- <span class="badge">Price: 9 credits</span><br />
<button type="button" class="btn btn-primary">Tototal price: <span class="badge"><span id="Totalcost">0</span></span> credits</button>
Because this just get of value="..." I want show name and price with id or class
Updated
#Beytulla, this works for me.
<html>
<head>
<script>
function buttonClick(){
var total = 0;
var type = "";
for(var i=1;i<=3;i++) {
var id = "check_list" + i;
var label = "label" + i;
var badge = "badge" + i;
if (document.getElementById(id).checked!=null && document.getElementById(id).checked==true) {
total += parseInt(document.getElementById(id).value);
type += document.getElementById("label"+i).innerHTML + " : " + document.getElementById("badge"+i).innerHTML + ",";
}
}
document.getElementById('Totalcost').innerHTML = total;
document.getElementById('individual').innerHTML = type;
}
</script>
</head>
<body>
<form method="post">
<input type="checkbox" name="check_list1" id="check_list1" value="5" onClick="buttonClick(this);"><label id="label1"> Flag A</label> <span class="badge" id="badge1">Price: 5 credits</span><br />
<input type="checkbox" name="check_list2" id="check_list2" value="13" onClick="buttonClick(this);"><label id="label2"> Flag B</label> <span class="badge" id="badge2">Price: 13 credits</span><br />
<input type="checkbox" name="check_list3" id="check_list3" value="9" onClick="buttonClick(this);"><label id="label3"> Flag C</label> <span class="badge" id="badge3">Price: 9 credits</span><br />
<button type="button" class="btn btn-primary" onclick="buttonClick()">Total price:
<span class="badge"><span id="Totalcost">0</span></span> credits (<span id="individual">0</span>)</button>
</form>
</body>
</html>
Something like this:
you need to mark your label with an "id" and your input with an attribute "data-index". This is not a complete solution since you still need to deal with the uncheck action, although you can start from this example if you learn doing.
var total = 0;
function test(item) {
if (item.checked) {
var label = document.querySelector('#label'+ item.dataset.index);
total += label.innerText + " - " + parseInt(item.value) + " credits; ";
}
//alert(total);
document.getElementById('Totalcost').innerHTML = "Labels selected: " + total;
}
<input data-index="1" type="checkbox" name="check_list[]" value="5" onClick="test(this);">
<label id="label1">- Flag A</label>
<- <span class="badge">Price: 5 credits</span><br />
<input data-index="2" type="checkbox" name="check_list[]" value="13" onClick="test(this);">
<label id="label2">- Flag B</label>
<- <span class="badge">Price: 13 credits</span><br />
<input type="checkbox" data-index="3" name="check_list[]" value="9" onClick="test(this);">
<label id="label3">- Flag C</label>
<- <span class="badge">Price: 9 credits</span><br />
<button type="button" class="btn btn-primary">Tototal price: <span class="badge"><span id="Totalcost">0</span></span> credits</button>
how i get subtotal with php need to check user have subtotal credits if his have send mysql to database and delete subtotal = credits
so i try this
<script>function basket(item) {
if (item.checked) {
subtotal = subtotal + parseInt(item.value);
var basketItem = document.createElement('div');
basketItem.id = "Basket_" + item.id;
basketItem.innerHTML = "<span class='badge'>Toplam tıklama sayısı: <span class='badge' style='background-color:red;'>" + item.id + "</span> == " + item.value + " credits</span> ";
document.getElementById('Yetkiler').appendChild(basketItem);
} else {
subtotal = subtotal - parseInt(item.value);
document.getElementById('Basket_' + item.id).remove();
}
document.getElementById('subtotal').innerHTML = "<button type='button' class='btn btn-primary'>Total: <span class='badge'>" + subtotal + " credits</span>";
}
</script>
<?php
$price1 = "10";
$price2 = "20";
$price3 = "30";
how i do this
if($user['kredits'] > here subtotal){
?>
<form method="post">
<input id="150" type="checkbox" name="max_clicks" onClick="basket(this);" value="<?php echo "".$price1."";?>" />
<label for="150">150 Tık</label><- <span class="badge">Fiyat: <?php echo "".$price1."";?> kredi</span>
<br/>
<input id="400" type="checkbox" name="max_clicks" onClick="basket(this);" value="<?php echo "".$price2."";?>" />
<label for="400">400 Tık</label><- <span class="badge">Fiyat: <?php echo "".$price2."";?> credits</span>
<br/>
<input id="735" type="checkbox" name="max_clicks" onClick="basket(this);" value="<?php echo "".$price3."";?>" />
<label for="735">735 Tık</label><- <span class="badge">Fiyat: <?php echo "".$price3."";?> credits</span>
<br/>
<div id="Yetkiler"></div>
<span id="subtotal"></span>
<input class="btn btn-success" style="float:right;" type="submit" name="add_ad" value="Reklam satın al"
</form>
<?php } ?>
Scenario:
Three unchecked check-boxes, each with different id and value.
An empty paragraph (or label) with id = par.
[CB1] has value 1.
[CB2] has value 2.
[CB3] has value 3.
Now, when I click cb1 -> 'par' gets and prints the value of cb1.
Clicking on cb3, 'par' gets the value of cb1+cb3.
Clicking cb1, 'par' subtracts the value of cb1 and so on.. I think you get the point.
How can I achieve this with only HTML and JavaScript (without jQuery).
<input type="checkbox" id="1" value="1" />
<input type="checkbox" id="2" value="2" />
<input type="checkbox" id="3" value="3" />
<p id="par"></p>
This will do it: jsfiddle example (updated to remove alert)
HTML:
<input type="checkbox" id="1" value="1" onclick='checkClicked(event)'/>
<input type="checkbox" id="2" value="2" onclick='checkClicked(event)'/>
<input type="checkbox" id="3" value="3" onclick='checkClicked(event)'/>
<p id="par"></p>
JavaScript:
function checkClicked(element)
{
var targetElement = element.target;
var newVal = targetElement.value;
if( !targetElement.checked )
{
newVal *= -1;
}
var currentVal = document.getElementById('par').innerHTML;
if( currentVal )
{
newVal = parseInt(currentVal) + parseInt(newVal);
}
document.getElementById('par').innerHTML = newVal;
}
<label>
<input type="checkbox" id="check1" value="check1" onchange="alterP(this);"/>check1
</label>
<label>
<input type="checkbox" id="check2" value="check2" onchange="alterP(this);"/>check2
</label>
<label>
<input type="checkbox" id="check3" value="check3" onchange="alterP(this);"/>check3
</label>
<p id="par"></p>
js Code
function alterP(obj) {
var par = document.getElementById('par');
var txt = (obj.checked) ? obj.value : "";
par.innerHTML = txt;
}
<script>
document.getElementById("1").addEventListener("click", processCheck);
document.getElementById("2").addEventListener("click", processCheck);
document.getElementById("3").addEventListener("click", processCheck);
function processCheck() {
var theParagraph = document.getElementById("par");
var currentValue = 0;
if (!isNaN(parseInt(theParagraph.textContent))) {
currentValue = parseInt(theParagraph.textContent)
}
if (this.checked) {
theParagraph.textContent = currentValue + parseInt(this.value);
}
else {
theParagraph.textContent = currentValue - parseInt(this.value);
}
}
</script>
I have a form with multiple groups of checkboxes (among other things). Some of these groups are mandatory fields (At least one checkbox needs to be checked within that group).
I am able to tell if a group has a checkbox checked, but I failed to make them mandatory. Also I am need to get one long string with the values of the selected checkbox(es). I would need to have a string where if the user checks, say the first 3 checkboxes from group1, the string to be:
"zero | 1 val | 2 val"
The code is a simplified version of my original. Here is the jFiddle: http://jsfiddle.net/QyY2P/1/
Also, for your convenience I am also including the code here:
jQuery:
function countChecked() {
//Group 1
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});
//Group 2
var n = $("#group2 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group2 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection3").text(txt);
alert($(this).val() + " | ");
});
}
countChecked();
$(":checkbox").click(countChecked);
HTML:
<form>
<div id="group1">
<p> *Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 val" />
<input type="checkbox" name="ckb_unit[]" value="2 val" />
<input type="checkbox" name="ckb_unit[]" value="3 val" />
<input type="checkbox" name="ckb_unit[]" value="4 val" />
</div>
<div id="group2">
<p>Please select a box</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="A" />
<input type="checkbox" name="ckb_unit[]" value="B" />
<input type="checkbox" name="ckb_unit[]" value="C" />
<input type="checkbox" name="ckb_unit[]" value="D" />
</div>
<div id="group3">
<p>*Please select a box (Mandatory)</p>
<input type="checkbox" name="ckb_unit[]" value="zero" />
<input type="checkbox" name="ckb_unit[]" value="1 A" />
<input type="checkbox" name="ckb_unit[]" value="2 B" />
<input type="checkbox" name="ckb_unit[]" value="3 C" />
<input type="checkbox" name="ckb_unit[]" value="4 D" />
</div>
</form>
<!-- For debugging purposes -->
<br/>
<div id="count"></div>
<div id="selection1"></div>
<div id="selection3"></div>
PS. I am a beginner, perhaps you noticed it by my not so elegant coding >_<
You can make it mandatory by checking if n is 0 when the user hits submit and then attracting the user's attention towards it somehow (appending an error message, for example). I'm talking about this n:
var n = $("#group1 input:checked").length;
Looking at JSFiddle, it seems you didn't declare txt as a variable, so this works for me:
//Group 1
var txt = ""; // initialise txt with an empty string, so you can append to it later
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
txt += ($(this).val() + " | ");
$("#selection1").text(txt);
alert($(this).val() + " | ");
});