We Keep Coding

how solve problem of a radio in javascript?

I want user to choice one from each of the two radio buttons and this change the variable to display by button function.
How can I achieve this?
So far I have done the following -
function ok() {
if (document.getElementById("vanilla").checked = true;)
var flavor = "vanilla";
if (document.getElementById("chocolate").checked = true;)
var flavor = "chocolate";
if (document.getElementById("cone").checked = true;)
var vessel = "cone";
if (document.getElementById("bowl").checked = true;)
var vessel = "bowl";
if (document.getElementById("sprinkles").checked = true;)
var toppings = "sprinkles";
if (document.getElementById("peanuts").checked = true;)
var toppings = "peanuts";
document.getElementById("par").innerHTML = "I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + "."
}
<h1>choice your Ice Cream</h1>
<div>
<h4>Please select a flavor:</h4>
<input type="radio" id="vanilla" name="flavor" value="vanilla">
<label for="vanilla">vanilla</label><br>
<input type="radio" id="chocolate" name="flavor" value="chocolate">
<label for="chocolate">chocolate</label>
<br>
<h4>Please select a vessel:</h4>
<input type="radio" id="cone" name="vessel" value="cone">
<label for="cone">cone</label><br>
<input type="radio" id="bowl" name="vessel" value="bowl">
<label for="bowl">bowl</label>
<br>
<h4>Please select a toppings:</h4>
<input type="radio" id="sprinkles" name="toppings" value="sprinkles">
<label for="sprinkles">sprinkles</label><br>
<input type="radio" id="peanuts" name="toppings" value="peanuts">
<label for="peanuts">peanuts</label>
<p id="par"></p>
<button onClick="ok()">ok</button>
</div>

Try this:
function ok() {
var flavor = document.querySelector("[name='flavor']:checked").value;
var vessel = document.querySelector("[name='vessel']:checked").value;
var toppings = document.querySelector("[name='toppings']:checked").value;
document.getElementById("par").innerHTML = "I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + "."
}
<h1>choice your Ice Cream</h1>
<div>
<h4>Please select a flavor:</h4>
<input type="radio" id="vanilla" name="flavor" value="vanilla">
<label for="vanilla">vanilla</label><br>
<input type="radio" id="chocolate" name="flavor" value="chocolate">
<label for="chocolate">chocolate</label>
<br>
<h4>Please select a vessel:</h4>
<input type="radio" id="cone" name="vessel" value="cone">
<label for="cone">cone</label><br>
<input type="radio" id="bowl" name="vessel" value="bowl">
<label for="bowl">bowl</label>
<br>
<h4>Please select a toppings:</h4>
<input type="radio" id="sprinkles" name="toppings" value="sprinkles">
<label for="sprinkles">sprinkles</label><br>
<input type="radio" id="peanuts" name="toppings" value="peanuts">
<label for="peanuts">peanuts</label>
<p id="par"></p>
<button onClick="ok()">ok</button>
</div>

on click mulitple input then show button for validation jquery

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);
}
});

Javascript help, randomizing quiz questions

i made some code recently but im wondering how to make the quiz choose 3 questions out of 6 instead of displaying 6 straight away. Help would be appreciated. I want the quiz to choose 3 questions at random, then if its reloaded have a chance to choose another 3 questions, out of a total pool of 6.
<script language="JavaScript">
var numQues = 6;
var numChoi = 3;
var answers = new Array(6);
answers[0] = "16";
answers[1] = "8";
answers[2] = "The Walking Dead";
answers[3] = "Batman v Superman";
answers[4] = "Tupac";
answers[5] = "#ATAME2016";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
</script>
</head>
<body>
<form name="quiz">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
<p>
2. How many pages are on this website?<br>
<input type="checkbox" name="q2" value="8">8<br>
<input type="checkbox" name="q2" value="6">6<br>
<input type="checkbox" name="q2" value="7">7<br>
<p>
3. What's the most popular show this week?<br>
<input type="checkbox" name="q3" value="The Walking Dead">The Walking Dead<br>
<input type="checkbox" name="q3" value="Mandem on the wall">Mandem on the wall<br>
<input type="checkbox" name="q3" value="Cotchin with Ksara">Cotchin with Ksara<br>
<p>
4. What movie has made the most money this week in the box office?<br>
<input type="checkbox" name="q4" value="Ride along 2">Ride along 2<br>
<input type="checkbox" name="q4" value="Batman v Superman">Batman v Superman<br>
<input type="checkbox" name="q4" value="GasMan">GasMan<br>
<p>
5. Which star in the celebrity page is no longer alive?<br>
<input type="checkbox" name="q5" value="Tupac">Tupac<br>
<input type="checkbox" name="q5" value="50 Cent">50 Cent<br>
<input type="checkbox" name="q5" value="Bradley cooper">Bradley cooper<br>
<p>
6. What is our twitter account name (#)?<br>
<input type="checkbox" name="q6" value="#ATAME">#ATAME<br>
<input type="checkbox" name="q6" value="#ATAME2016">#ATAME2016<br>
<input type="checkbox" name="q6" value="#A2THETAME">#A2THETAME<br>
<p>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear"><p>
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
</form>
</div>

You'll want to use a Math.random() function. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
A common example is found at: http://www.w3schools.com/jsref/jsref_random.asp
I'd try something like this, using jQuery:
// Hides all questions on page load.
$('.questions').hide();
// Randomly shows 3 questions.
for (var i=0; i<3; i++) {
var questionId = Math.floor((Math.random() * 6) + 1);
$('#question-' + questionId).show();
}
Then wrap your questions in wrapping <div> or <p> tags like this:
<div id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</div>
Or this:
<p id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</p>

Quiz - Counts Radio Button Values

I'm trying to create a Quiz for a Spanish class. I have little experience with JavaScript, but am fairly proficient with html and CSS. I have a question and followed by three radio buttons with answers. There are two incorrect answers and a correct answer. I have 45 questions total.
<form name="quiz" method="post" name="buttons" id="form" onsubmit="return totalVal()">
<li><div class="question">¿Quién detestan la nueva casa?</div></li>
<input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
<input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
<input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>
<li><div class="question">¿Quién es señor Dawes?</div></li>
<input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
<input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
<input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>
<li><div class="question">¿Quién qué sus buscan?</div></li>
<input id="answer" type="radio" name="group3" value="wrong">Josh<br>
<input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
<input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>
<button class="submit" onclick="showTotalvalue();" type="submit">Submit</button></div>
I want to use some basic Javascript to count all the "correct" radio button values and output to a new page or alert box that displays after the user clicks submit.
I found this in my research. In my googling, I haven't been able to find a snippet of code that counts the "correct" values. The link above is the closest I've gotten. I attached the JavaScript that I changed to fit my situation from the suggestion on the other post.
totalVal = 0;
// calculate the total number of corrects clicked
for (y = 0; y = incorrectOfQuestion; y++) {
var questionNo = document.getElementsByName("questions" + y);
for (i = 0; i < questionNo.length; i++) {
if (document.myform.questions[i].checked == true) {
totalVal = totalVal + parseInt(document.myform.questions[i].value, 45);
}
}
}
Any assistance is greatly appreciated as I am in a time crunch! Thank you!

This should be the code you require to get it working with an alert box:
function handleClick()
{
var amountCorrect = 0;
for(var i = 1; i <= 45; i++) {
var radios = document.getElementsByName('group'+i);
for(var j = 0; j < radios.length; j++) {
var radio = radios[j];
if(radio.value == "correct" && radio.checked) {
amountCorrect++;
}
}
}
alert("Correct Responses: " + amountCorrect);
}
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<li><div class="question">¿Quién detestan la nueva casa?</div></li>
<input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
<input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
<input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>
<li><div class="question">¿Quién es señor Dawes?</div></li>
<input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
<input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
<input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>
<li><div class="question">¿Quién qué sus buscan?</div></li>
<input id="answer" type="radio" name="group3" value="wrong">Josh<br>
<input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
<input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>
<button class="submit" onclick="return handleClick();" type="submit">Submit</button>
</form>
#pimvdb had used the === operator when checking for the "correct" string which does not allow type conversion and was therefore failing. He also used getElementsByClassName but the elements do not have a class applied to them so this was incorrect.
The working version can be found in the fiddle below. As you can see the onsubmit of the form has been set to "return false" to stop the form from posting.
http://jsfiddle.net/g45nG/1/

You can loop over each radio group, then loop over each radio button to check whether the correct one is checked.
var amountCorrect = 0;
for(var i = 1; i <= 45; i++) {
var radios = document.getElementsByName("group" + i);
for(var j = 0; j < radios.length; j++) {
var radio = radios[j];
if(radio.value === "correct" && radio.checked) {
amountCorrect++;
}
}
}

Radio Button Javascript

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!)