I have radiobuttons like below:
Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />
Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
The radiobuttons are separated in a Group as (Apple,Mango,Pineapple,Grape).
I need to add the Price with the Quantity he needs.
Example:
If a user clicked Dark Apple in the radiobutton with 1 Qty the Price should be 20 and if the user changed the clicked Radio to the Light Apple radiobutton then the price should be 10 - 20(Previous Price If Checked) = 10 .
Is this possible using JavaScript?
My code that I have tried:
function upprice(ref)
{
var elname = ref.getAttribute("name");
var qtyname = elname+"qty";
var price = ref.getAttribute("proprice");
var qty = parseInt(document.getElementById(qtyname).value)
var newprice = parseInt(price*qty);
var olprice = parseInt(document.getElementById("orderpagepriceinstant").innerHTML);
var totalprice = parseInt(olprice+newprice);
document.getElementById("orderpagepriceinstant").innerHTML = parseInt(totalprice)
}
Your inputs should be something like:
<input type="radio" name="apple" value="10">Light
<input type="radio" name="apple" value="20">Dark
<input type="text" name="appleqty" value="">
You can put a click listener on the radio buttons and a change listener on the quantity to update the price:
<input type="radio" onclick="updatePrice(this)" ...>
<input type="text" onclick="updatePrice(this)" ...>
and the update function is:
function updatePrice(el) {
var priceEach, quantity, itemValue;
if (el.type == 'radio') {
priceEach = getRBValue(el);
quantity = el.form[el.name + 'qty'].value;
} else if (el.type == 'text') {
quantity = el.value;
priceEach = getRBValue(el.form[el.name.replace(/qty$/,'')]);
}
/*
code here to validate the value of quantity
*/
itemValue = quantity * priceEach;
/*
do something with itemValue
*/
alert(itemValue);
}
// Get the value of a radio button set
function getRBValue(el) {
var buttons;
// See if have been passed a button or button set (NodeList)
if (el.type == 'radio') {
buttons = el.form[el.name];
} else if (typeof el.length == 'number') {
buttons = el;
}
if (buttons) {
for (var i=0, iLen=buttons.length; i<iLen; i++) {
if (buttons[i].checked) {
return buttons[i].value;
}
}
}
}
</script>
The markup, you can also add a click listener to the form to do updates rather than on each radio button. You should also have a reset button so the user can clear the form.
<form ... >
<input type="radio" name="apple" value="10" onclick="updatePrice(this)">Light
<input type="radio" name="apple" value="20" onclick="updatePrice(this)">Dark
<input type="text" name="appleqty" value="" onchange="updatePrice(this)">
<br>
<input type="reset">
</form>
Here's a quick jQuery example: http://jsfiddle.net/FTscC/
(laptop dying, I'll elaborate when I can tomorrow!)
Related
Following on from my previous question, I am now struggling to pass the values of my radio buttons to my JavaScript function.
The desired output is to have both a 'BMR' value, and a 'recommended caloric intake' value, which is simply BMR x activity multiplier.
Here is both my JavaScript and HTML:
JavaScript
<script>
function calcCals() {
let gender = document.getElementById("gender").value;
let weightKG = document.getElementById("weight").value;
let heightCM = document.getElementById("height").value;
let age = document.getElementById("age").value;
let activity = document.getElementById("activity").value;
let calories;
let BMR;
// Calculate BMR
if (gender == 'male') {
BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5;
} else {
BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161;
}
// Calculate Calories
if (activity == '1') {
calories = BMR * 1.2
} if (activity == '2') {
calories = BMR * 1.375
} if (activity == '3') {
calories = BMR * 1.55
} if activity == '4' {
calories = BMR * 1.725
} if activity == '5' {
calories = BMR * 1.9
}
console.log(BMR);
document.getElementById("bmrOutput").textContent = "Your BMR is " + BMR;
document.getElementById("calorieNeedsOutput").textContent = "Your Caloric Needs are " + calories;
event.preventDefault();
return;
}
</script>
HTML
<!--Enter Age and Gender-->
<h4>Age & Gender</h4>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="range" id="age" name="amountRange" min="16" max="80" value="30" oninput="this.form.amountInput.value=this.value">
<input type="number" id="age" name="amountInput" min="16" max="80" value="30" oninput="this.form.amountRange.value=this.value">
<!--Enter Height and Weight-->
<h4>Your Measurements</h4>
<input type="number" id="weight" placeholder="Weight in KG" required>
<input type="number" id="height" placeholder="Height in CM" required>
<!--Enter Activity Levels-->
<h4>Your Activity Level</h4>
<fieldset class="activity-select" id="activity">
<label><input type="radio" value="1" name="activity">Sedentary</label>
<label><input type="radio" value="2" name="activity">Lightly Active</label>
<label><input type="radio" value="3" name="activity">Moderately Active</label>
<label><input type="radio" value="4" name="activity">Very Active</label>
<label><input type="radio" value="5" name="activity">Extremeley Active</label>
</fieldset>
<!--Enter Goal and Contact Info-->
<h4>Your Goal + Contact Info</h4>
<input type="text" placeholder="What is your name?">
<input type="email" placeholder="Where shall we send your results?">
<select name="goal" id="goal">
<option value="lose">Lose Weight</option>
<option value="gain">Gain Muscle</option>
<option value="maintain">Maintain</option>
</select>
<!--Submit Button-->
<button type="submit" id="submitBtn">Do Magic!</button>
</form>
<p id="bmrOutput"></p>
<p id="calorieNeedsOutput"></p>
</section>
In this solution I simplified the source code to read the radio button. When the submit button is clicked, the value of the selected radio button item is printed to the console. You can improve its algorithm by reading the value of the selected radio button element using the following approach.
let submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click', function() {
/* The value of the selected radio button element whose "name" attribute is "activity" from the <input> elements is assigned to the "activity" variable. */
let activity = document.querySelector('input[name="activity"]:checked').value;
console.log(`Activity: ${activity}`);
});
<fieldset class="activity-select" id="activity">
<label><input type="radio" value="1" name="activity">Sedentary</label>
<label><input type="radio" value="2" name="activity">Lightly Active</label>
<label><input type="radio" value="3" name="activity">Moderately Active</label>
<label><input type="radio" value="4" name="activity">Very Active</label>
<label><input type="radio" value="5" name="activity">Extremeley Active</label>
</fieldset>
<!--Submit Button-->
<button type="submit" id="submitBtn">Do Magic!</button>
The code snippet below shows the above solution applied to your code. For testing purposes, I removed the <form> element so that it would not submit after the button was clicked, and I made the click event fire for the button.
let submitButton = document.getElementById('submitBtn');
let firstAgeInput = document.getElementById('age1');
let secondAgeInput = document.getElementById('age2');
let gender = document.getElementById("gender");
let weightKG = document.getElementById("weight");
let heightCM = document.getElementById("height");
let age = document.getElementById('age1').value;
let bmrOutput = document.getElementById("bmrOutput");
let calorieNeedsOutput = document.getElementById("calorieNeedsOutput");
let ageInputs = document.querySelectorAll('.ageInputs');
/* Fields that may be null or empty should be checked for the calculation. */
function isValid() {
let activity = document.querySelector('input[name="activity"]:checked');
if(activity != null && weightKG.value.length != 0 && heightCM.value.length != 0)
return true;
return false;
}
/* This method updates the age value bidirectionally. */
function updateAge(newValue) {
secondAgeInput.value = newValue;
firstAgeInput.value = newValue;
}
/* Elements with the ".ageInputs" class style apply an input event. */
ageInputs.forEach(function(item, index) {
item.addEventListener('input', function() {
updateAge(this.value);
});
});
/* When the Submit button is clicked, this event is triggered and the result is printed to the HTML document. */
submitButton.addEventListener('click', function() {
if(isValid()) {
let activity = document.querySelector('input[name="activity"]:checked');
const bmrConstant = [1.2, 1.375, 1.55, 1.725, 1.9];
let calories, BMR = 10 * weightKG.value + 6.25 * heightCM.value - 5 * age;
(gender.value === 'male') ? (BMR += 5) : (BMR -= 161);
calories = BMR * bmrConstant[parseInt(activity.value) - 1];
bmrOutput.textContent = "Your BMR is " + BMR;
calorieNeedsOutput.textContent = "Your Caloric Needs are " + calories;
}
else
console.log("Fill in the blank fields in the form.");
});
<h4>Age & Gender</h4>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<!-- Items with the same id should not be used; therefore the following two items have been edited. -->
<input class="ageInputs" type="range" id="age1" name="amountRange" min="16" max="80" value="30">
<input class="ageInputs" type="number" id="age2" name="amountInput" min="16" max="80" value="30">
<h4>Your Measurements</h4>
<input type="number" id="weight" placeholder="Weight in KG" required>
<input type="number" id="height" placeholder="Height in CM" required>
<h4>Your Activity Level</h4>
<fieldset class="activity-select" id="activity">
<label><input type="radio" value="1" name="activity">Sedentary</label>
<label><input type="radio" value="2" name="activity">Lightly Active</label>
<label><input type="radio" value="3" name="activity">Moderately Active</label>
<label><input type="radio" value="4" name="activity">Very Active</label>
<label><input type="radio" value="5" name="activity">Extremeley Active</label>
</fieldset>
<h4>Your Goal + Contact Info</h4>
<input type="text" placeholder="What is your name?">
<input type="email" placeholder="Where shall we send your results?">
<select name="goal" id="goal">
<option value="lose">Lose Weight</option>
<option value="gain">Gain Muscle</option>
<option value="maintain">Maintain</option>
</select>
<button id="submitBtn">Do Magic!</button>
<p id="bmrOutput"></p>
<p id="calorieNeedsOutput"></p>
In my project I want change src part (ar-button's src) related to my radio buttons check.
For ex: When you check "Option 1" I want to change src part on ar-button. Than when you check Option3x(with checked option1 and option1x) I want to change src again.
I mean for all 64 combination of checks I want to change src.
Any help or suggestion would be great!
Thanks..
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
id="change" src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
id="change2 ios-src="https://basebros.com/models/ar_base_tekli_koltuk_3d.usdz"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
Try using this code:
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[[],[],[],[]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
Run the function each time you want to update the source.
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
<script>
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[["https://basebros.com/models/ar_base_ayakkabi.glb"],["https://basebros.com/models/ar_base_camasir_makinesi_3d.glb"],["https://basebros.com/models/ar_base_kahve_makinesi_3d.glb"],["https://basebros.com/models/ar_base_nintendo.glb"]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
</script>
I have here three sections, how can I make the next button show up when all three sections have been clicked? If one of them is not clicked then the button with the class "hideme" is visible, if all of them are clicked then hide "hideme" and show the "third_step" button.
<input type="date" name="purchase_date">
<input type="radio" name="group" value="one">
<input type="radio" name="group" value="two">
<input type="radio" name="group" value="three">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
<a class="next hideme">Next</a><a class="next third_step">Next</a>
Anybody please help, I don't know where to start on this.
Here I have add a id on <form>. And give the input some class .
use Change event | Show() | hide()
Try this
<form id="myForm">
<input type="date" name="purchase_date" class="date">
<input type="radio" name="group" value="one" classs="group">
<input type="radio" name="group" value="two" classs="group">
<input type="radio" name="group" value="three" classs="group">
<input type="radio" name="choice" value="yes" classs="choice">
<input type="radio" name="choice" value="no" classs="choice">
<a class="next" style="display:none">Next</a>
</form>
<script>
$(document).ready(function(){
$('.group').on('change',function(){
$('.date').change();
});
$('.choice').on('change',function(){
$('.date').change();
});
$('.date').on('change',function(){
var date = $('.date').val();
var group = ($('input:radio[name=group]:checked').val() || 0);
var choice = ($('input:radio[name=choice]:checked').val() || 0);
if(date != '' && group != '' && group != 0 && choice != '' && choice != 0)
$('.next').show();
else
$('.next').hide();
});
});
</script>
$(document).on("click, change","input[name=group],
input[name=choice],
input[name=purchase_date] ",
function(){
var groupSelected = $("input[name=group]:checked").val();
var choiceSelected = $("input[name=choice]:checked").val();
var dateSelected = $("input[name=purchase_date]").val();
if(groupSelected === undefined ||
choiceSelected === undefined ||
dateSelected === undefined ||
dateSelected === "")
{
$(".next").toggleClass("hideme",true);
}
else{
$(".next").toggleClass("hideme",false);
}
});
I have a list of 5 radio buttons, with the last radio button to select a manual entry text (an "other" option). I can't seem to get the form to work for all 5 possibilities - either it returns the radio value or the written value (currently only the written value and not any of the preset radio values). Can't get it to work for all of 5 possible returns.
Here's the javascript to either select text or clear it when unselected:
<script type= "text/javascript" >
function HandleRadioOtherBox(grp, txt)
{
var x, len = grp.length;
for (x =0; x<len; ++x)
{
if (grp[x].checked) break;
}
if (x < len && grp[x].value == txt.name)
{
txt.disabled = false;
txt.select();
txt.focus();
}
else
{
txt.value = "";
txt.disabled = true;
}
return true;
}
window.onload = function ()
{
var ele = document.forms[0].elements;
return HandleRadioOtherBox(ele['OPS'], ele['Country']);
}
</script>
And here, the HTML radio button portion:
<tr valign="top">
<td class="style3">Country: </td>
<td class="copy">
<input type="radio" name="OPS" value="United States" checked="checked"
onclick="return HandleRadioOtherBox(OPS, Country)" /> United States
<input type="radio" name="OPS" value="Canada"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Canada
<input type="radio" name="OPS" value="England"
onclick="return HandleRadioOtherBox(OPS, Country)" /> England
<input type="radio" name="OPS" value="Australia"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Australia <br />
<input type="radio" name="OPS" value="Country"
onclick="return HandleRadioOtherBox(OPS, Country)" /> Other Country:
<input type='text' name="Country" id="Country" maxlength='80' />
</td>
</tr>
Have spent many, many hours with not much of a hole made in the cement (yet). :-)
Help!
You can write a single function for your form which checks for two events:
radio button check
text input blur
and then gives an appropriate response based on which radio button registered a check event or whether the text input registered a blur event:
var radioButtons = document.querySelectorAll('input[type="radio"]');
var otherCountryRadio = document.querySelector('.other-country input[type="radio"]');
var otherCountryText = document.querySelector('.other-country input[type="text"]');
function returnValue() {
if (this === otherCountryRadio) {
otherCountryText.focus();
}
else {
if (this.value.match(/\w/)) {
console.log(this.value);
}
}
}
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', returnValue, false);
}
otherCountryText.addEventListener('blur', returnValue, false);
div {
margin: 12px;
}
.other-country input[type="text"] {
visibility: hidden;
}
.other-country input:checked + input[type="text"] {
visibility: visible;
}
<form>
<div class="top-countries">
<label><input type="radio" name="OPS" value="United States" checked="checked" /> United States</label>
<label><input type="radio" name="OPS" value="Canada" /> Canada</label>
<label><input type="radio" name="OPS" value="England" /> England</label>
<label><input type="radio" name="OPS" value="Australia" /> Australia</label>
</div>
<div class="other-country">
<label>
<input type="radio" name="OPS" value="Other" /> Other Country
<input type="text" name="Country" />
</label>
</div>
</form>
function radioVal(){
//var radVal = document.mainForm.rads.value;
var radVal = document.getElementsByName("rads").value;
result.innerHTML = 'You selected: '+radVal;
}
<div class="pres">
<input type="radio" id="radio01" name="rads" value="10" checked />
<label for="radio01" class="dis"><span>1 time service</span></label>
</div>
<div class="pres">
<input type="radio" id="radio02" name="rads" value="20" />
<label for="radio02" class="dis"><span>Every week</span></label>
</div>
<div class="pres">
<input type="radio" id="radio03" name="rads" value="15" />
<label for="radio03" class="dis"><span>Every 2 weeks </span></label>
</div>
<div class="pres">
<input type="radio" id="radio04" name="rads" value="10" />
<label for="radio04" class="dis"><span>Every 4 weeks</span></label>
</div>
<input type="text" value="" id="result" name="perce" />
<input type="text" value="" id="txtservV" name="servicename" />
<input type="text" value="" id="final_pay" name="final_pay" />
Hello i am using this function to get the value of a selected radio button in a textfield name perce and its value in a field name servicename any one help me in it to sourt it out. I am using this function in doucument.ready function.
Use Document.getElementsByName function which returns array of elements (or better collection, array-like object), so that you can access value of input by index (0 in your case):
var perceVal = document.getElementsByName("perce")[0].value
In case of radio buttons you have to iterate through elements and find which one is checked:
var rads = document.getElementsByName("rads");
var radsValue;
for (var i = 0; i < rads.length; i++) {
if (rads[i].checked) {
radsValue = rads[i].value // here is checked radio
break;
}
}