Progress bar not working on HTML page - javascript

I'm using javascript and HTML to create a questionnaire form. My idea was to inform the user of how many questions they've got to go. I've tried a couple of ways of getting a progress bar to work which has led me to the code below. I want the bar to progress after the user has selected an answer to a question.
This is the javascript code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
var progress = 0;
//need this to check if the question has not been answered before
var questions = {
"q1": 0,
"q2":0,
"q3":0,
"q4":0
}
$( function() {
$("#progressbar-1").text(progress)
$("input, select").change( function() {
el_name = $(this).attr("name");
switch (this.nodeName.toLowerCase()) {
case "select":
field =$("[name='"+el_name+"']");
val = (field.val() === "" || !field.val()) ? null: field.val();
break;
case "input":
field =$("[name='"+el_name+"']:checked");
val = field.length;
break;
}
if (val) {
if (!questions[el_name]) {
progress = progress +1;
questions[el_name]=1
}
} else {
questions[el_name]=0
progress = (progress > 0)?progress-1:0;
}
$("#progressbar-1").text(progress)
})
})
</script>
This is the HTML code.
<div class="container-main bg-5">
<button style="float:left" onclick="goBack()">Go Back</button>
<h1>What IT sector could suit you</h1>
<p>Take the questionnaire below!</p>
<form id="quiz">
<!-- Question 1 -->
<h2>Do you enjoy fixing things</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" id="q1" value="c1">
Yes
</label><br />
<label>
<input type="radio" name="q1" id="q1" value="c2">
No
</label><br />
<label>
<input type="radio" name="q1" id="q1" value="c3">
Maybe
</label><br />
<!-- Question 2 -->
<h2>Do you enjoy problem solving?</h2>
<!-- Here are the choices for the second question. Notice how each input tag has the same name (q2), but a different name than the previous question. -->
<label>
<input type="radio" name="q2" value="c2">
Yes
</label><br />
<label>
<input type="radio" name="q2" value="c1">
No
</label><br />
<label>
<input type="radio" name="q2" value="c3">
Unsure
</label><br />
<!-- Question 3 -->
<h2>Do you enjoy maths?</h2>
<!-- Choices for the third question -->
<label>
<input type="radio" name="q3" value="c2">
Yes
</label><br />
<label>
<input type="radio" name="q3" value="c1">
No
</label><br />
<label>
<input type="radio" name="q3" value="c3">
Unsure
</label><br />
<!-- Question 4 -->
<h2>Do you often take thing apart to rebuild them?</h2>
<!-- Choices for the fourth question -->
<label>
<input type="radio" name="q4" value="c1">
Yes
</label><br />
<label>
<input type="radio" name="q4" value="c2">
No
</label><br />
<label>
<input type="radio" name="q4" value="c3">
I have never done it before so i don't know
</label><br />
<!--Question 5 -->
<h2>Hardware or Software?</h2>
<label>
<input type="radio" name="q5" value="c1">
Hardware
</label><br />
<label>
<input type="radio" name="q5" value="c2">
Software
</label><br />
<button type='button' id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
</form>
<div id ="progressbar-1"></div>
</div>
The number is increasing but no CSS is happening. I feel like i'm not doing something glaringly obvious.

I have updated your progress bar HTML, JavaScript code and add some CSS.
Progress Bar HTML:
<div class="progress_dashv2">
<div id="progressbar-1"> </div>
</div>
JQuery Code:
var total_questions = 4;
// progress bar Calculation
var result = progress / total_questions;
result = result * 100;
$("#progressbar-1").css({'width':result+'%','background-color':'red'});
$("#progressbar-1").text(progress);
CSS Classes :
.progress_dashv2 {
margin-top: 0px;
background: #464646;
width: 100%;
float: left;
border-radius: 3px;
height: 30px;
}
#progressbar-1{
line-height: 11px;
padding: 10px;
border-radius: 3px;
}
Please refer to the following link (Your Example):
https://jsfiddle.net/fd8sntu8/1/

Related

Javascript conditionals not working on correct button combination

I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.

JavaScript -- is this radio button checked?

I'm trying to get the data on the user's selection from a radio form. Here is what I have tried.
<form id="office">
<label id="ques1"> question 1</label>
<div class="q1 wrong q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
<div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
<div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
<div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>
<br/>
<input type="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script>
var answersQ01 = document.getElementsById(q1a1).value;
function checkFunction()
{
if (answersQ01.checked) {/*here i would like to know if it's checked or not*/}
};
Which doesn't seem to be working. Any ideas on how to approach this?
I would rather, if possible, have my answers in HTML and JavaScript since I don't know PHP or jQuery.
Thanks a lot!
P.S
I've put each input in a div, so that I can give them separate designs in CSS.
Try this code, I will improve it if it doesn't work for you. (code snippets don't let you use the form tag).
window.onload = function() {
document.getElementById('submit').onclick = function() {
if (document.getElementById('q1a1').checked == true) {
console.log('checked');
} else {
console.log('not checked');
}
};
};
<!--<form id="office">-->
<label id="ques1">question 1</label>
<div class="q1 wrong q1a1">
<input type="radio" name="question1" id="q1a1" value="q1a1" />Answer1
<br/>
</div>
<div class="q1 wrong q1a2">
<input type="radio" name="question1" value="q1a2" />Answer2
<br/>
</div>
<div class="q1 wrong q1a3">
<input type="radio" name="question1" value="q1a3" />Answer3
<br/>
</div>
<div class="q1 right q1a4">
<input type="radio" name="question1" value="q1a4" />Answer4
<br/>
</div>
<br/>
<input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" />
<!--</form>-->
You can use document.querySelector to get the checked radio button.Here is the snippet for you
function checkFunction(){
var checkedValue='';
var getCheckedButton= document.querySelector('input[name="question1"]:checked');
if(getCheckedButton !==null){
checkedValue = getCheckedButton.value;
}
console.log(checkedValue);
}
Here is DEMO

Javascript multiple choice questionnaire. How do I change the Code so its possible to tick more than one answer? (with the 8th one)

This is my Code for my Quiz.
I tried to change it somehow but it still doesnt let me choose more than one option.
Do i need an extra Code or do i have to change the whole thing? Also if anyone can see any errors, please say so.
Thank You in Advance :)
<html>
<head>
<title>Knowledge Test</title>
<link rel="stylesheet" href="style folder/styles.css" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript">
var numQuest=8
var ie=document.all
function showAnswer(el,ans){
ie? ie[el].innerHTML='The answer is: '+ ans : document.getElementById(el).innerHTML='The answer is: '+ ans
}
function addup() {
var q, right, statement, total=0
questions=new Array();
for (i = 0; i < numQuest; i++)
questions[i]=0
if (document.forms.quiz.q1['right1']){
for (i = 0; i < numQuest; i++){
q="q"+(i+1)
right="right"+(i+1)
if (document.forms.quiz[q][right].checked)
questions[i]=1
}
}
else if (document.getElementById){
for (i = 0; i < numQuest; i++){
right="right"+(i+1)
if (document.getElementById(right).checked)
questions[i]=1
}
}
else
return;
for (i = 0; i < numQuest; i++)
total += questions[i]
/*///////////Set score /////////////*/
statement='You scored '+ total +' out of '+ numQuest +' correct, '+ Math.round(total/numQuest*100) +'%'
ie? ie.results.innerHTML=statement : document.getElementById('results').innerHTML=statement
}
function clearR(){
ie? ie.results.innerHTML='' : document.getElementById('results').innerHTML=''
for (i = 0; i < numQuest; i++)
ie? ie["ans"+(i+1)].innerHTML='' : document.getElementById("ans"+(i+1)).innerHTML=''
}
</script>
</head>
<body>
<div id="container">
<header>
<div class="width">
<h1>Quiz</h1>
<nav>
<ul>
<li>Home</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Additional Information</li>
<li>How I built this Website</li>
<li>Quiz</li>
</ul>
</nav>
</div>
</header>
<div id="body" class="width">
<center><h1>Test your Knowledge</h1></center>
<hr>
<form name="quiz">
Question 1:<br>
Which HTML attribute is used to define an inline style sheet?<br>
<input id="w1a" type="radio" unchecked name="q1"><label for="w1a">class</label><br>
<input id="right1" type="radio" unchecked name="q1"><label for="right1">style</label><br>
<input id="w1b" type="radio" unchecked name="q1"><label for="w1b">in-style</label><br>
<input id="w1c" type="radio" unchecked name="q1"><label for="w1c">font</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans1','style')"> <span id="ans1" class="chkans"></span>
<br> <br>
Question 2:<br>
What is the correct CSS syntax for making all the <"p"> elements bold?<br>
<input id="w2a" type="radio" unchecked name="q2"><label for="w2a">p style="text-size:bold"</label><br>
<input id="w2b" type="radio" unchecked name="q2"><label for="w2b">p {text-size:bold}</label><br>
<input id="right2" type="radio" unchecked name="q2"><label for="right2">p{font-weight:bold}</label><br>
<input id="w2c" type="radio" unchecked name="q2"><label for="w2c">p style="font-size:bold"</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans2','p{font-weight:bold}')"> <span id="ans2" class="chkans"></span>
<br> <br>
Question 3:<br>
What does HTML stand for?<br>
<input id="w3a" type="radio" unchecked name="q3"><label for="w3a">Hyperlinks and Text Markup Language</label><br>
<input id="w3b" type="radio" unchecked name="q3"><label for="w3b">Home Tool Markup Language</label><br>
<input id="right3" type="radio" unchecked name="q3"><label for="right3">Hyper Text Markup Laguage</label><br>
<input id="w3c" type="radio" unchecked name="q3"><label for="w3c">High Technic Markup Language</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans3','Hyper Text Markup Laguage')"> <span id="ans3" class="chkans"></span>
<br> <br>
Question 4:<br>
What does CSS stand for?<br>
<input id="right4" type="radio" unchecked name="q4"><label for="right4">Cascading Style Sheets</label><br>
<input id="w4a" type="radio" unchecked name="q4"><label for="w4a">Creative Style Sheets</label><br>
<input id="w4b" type="radio" unchecked name="q4"><label for="w4b">Computer Style Sheets</label><br>
<input id="w4c" type="radio" unchecked name="q4"><label for="w4c">Colorful Style Sheets</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans4','Cascading Style Sheets')"> <span id="ans4" class="chkans"></span>
<br> <br>
Question 5:<br>
Choose the right text color for a Website with a white background.<br>
<input id="right5" type="radio" unchecked name="q5"><label for="right5">black</label><br>
<input id="w5a" type="radio" unchecked name="q5"><label for="w5a">orange</label><br>
<input id="w5b" type="radio" unchecked name="q5"><label for="w5b">red</label><br>
<input id="w5c" type="radio" unchecked name="q5"><label for="w5c">yellow</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans5','black')"> <span id="ans5" class="chkans"></span>
<br> <br>
Question 6:<br>
Where in an HTML document is the correct place to refer to an external style sheet?<br>
<input id="w6a" type="radio" unchecked name="q6"><label for="w6a">In the <"head"> section</label><br>
<input id="w6b" type="radio" unchecked name="q6"><label for="w6b">At the end of the document</label><br>
<input id="right6" type="radio" unchecked name="q6"><label for="right6">At the top of the document</label><br>
<input id="w6c" type="radio" unchecked name="q6"><label for="w6c">In the <"body"> section</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans6','black')"> <span id="ans6" class="chkans"></span>
<br> <br>
Question 7:<br>
Which property is used to change the background color?<br>
<input id="w7a" type="radio" unchecked name="q7"><label for="w7a">color</label><br>
<input id="right7" type="radio" unchecked name="q7"><label for="right7">background-color</label><br>
<input id="w7b" type="radio" unchecked name="q7"><label for="w7b">bgcolor</label><br>
<input id="w7c" type="radio" unchecked name="q7"><label for="w7c">bgc</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans7','black')"> <span id="ans7" class="chkans"></span>
<br> <br>
Question 8:<br>
On a web page, how and where should be the logo/brand name?(choose 2)<br>
<input id="right8" type="radio" unchecked name="q8"><label for="right8">easy</label><br>
<input id="right8" type="radio" unchecked name="q8"><label for="right8">upper-left corner of the screen</label><br>
<input id="w8a" type="radio" unchecked name="q8"><label for="w8a">in the middle of the screen</label><br>
<input id="w8b" type="radio" unchecked name="q8"><label for="w8b">hard</label><br>
<input class="chkans" type="button" value="Check Answer" onclick="showAnswer('ans8','easy','upper-left corner of the screen')"> <span id="ans8" class="chkans"></span>
<br> <br>
<!--End of Questions-->
<hr><br>
<input type="button" value="See Score" onclick="addup()"> <span id="results"></span><br> <br>
<input type="button" value="Start Again" onclick="reset();clearR()">
</form>
</div>
</div>
</body>
</html>
Use <input type="checkbox"> instead of <input type="radio">.
input type="radio" represents a selection of one item from a list of items
input type="checkbox" represents a state or option that can be toggled

Alter DIV on Checkboxes

i want to have a series of yes/no questions, & depending on the RADIO BUTTON, the answer / text appears on the appropriate DIV.
I have found one answer - here and this does what i am after.
My question is, how easy is it to alter this so I can have MULTIPLE sets of radio buttons.
Ie
<input type="radio" name="type" value="tuser1" id="tuser1" /> (question 1)
<input type="radio" name="type" value="tuser2" id="tuser2" /> (question 2)
<input type="radio" name="type" value="tuser3" id="tuser3" /> (question 3) etc.
is it easy to alter the function, to accept numeric references & to alter the approriate DIV set ?
PS - i assume i can have text of multiple lines/paragraphs in each DIV.
PPS: my ultimate aim is to combine the "visable" divs, into a master div underneath (with a blank line in each div reply).
IE,
Q1 (yes/no), (show answer to q1 "yes")/(show answer to q1 "no")
master div:-
show Q1 result.
show Q2 result.
show Q3 result.
etc...
i'll put the master div inside a TEXTAREA form - to send to another website for processing - on my server.
i want the master div to preserve any new-lines / formattng of the answers (if the answer is on several lines).
Wrap your each question set in div. By this you can easily group your question. You can use class and data attributes.
Try this code,
HTML :
<div id="Qset1">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" checked />
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields1</div>
<div id='optdeliverer' class="no">//some other input fields1</div>
</div>
<div id="Qset2">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" checked />
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields2</div>
<div id='optdeliverer' class="no">//some other input fields2</div>
</div>
<div id="Qset3">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" checked />
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields3</div>
<div id='optdeliverer' class="no">//some other input fields3</div>
</div>
JS :
$(document).ready(function () {
$('input[type=radio]').change(function () {
if ($(this).attr('data-id', 'yes').is(':checked')) $(this).closest('div').find('.yes').toggle();
if ($(this).attr('data-id', 'no').is(':checked')) $(this).closest('div').find('.no').toggle();
});
});
SEE THIS FIDDLE DEMO
Demo find here
Remove checked property from radio buttons
I have add parent div for wrap questions called questions
Named textarea id as answers
HTML
<div id="questions">
<div id="Qset1">Question number 1
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" />Yes
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset2">Question number 2
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" />Yes
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset3">Question number 3
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" />Yes
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />No
</div>
</div>
<textarea id="answers"></textarea>
Added some css
#questions,#answers{
width:200px;
display: inline-block;
vertical-align: top;
}
#answers{
border:1px soied #000;
height:200px;
width:300px;
}
Here is the Jquery
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
$(document).ready(function () {
$('input[type=radio]').click(function () {
var ans="";
$('input[type=radio]').each(function(){
if($(this).attr("checked"))
{
var question=$(this).parent().contents().get(0).nodeValue;
ans=ans + question + $(this).val() + "\r" ;
}
$("#answers").html(ans);
});
});
});

Javascript: Radio button and displaying images based on a vaule

I am currently working with displaying images based on the value chosen from a radio button. But I am currently running into a wall with making the code as short and efficient as possible. I have several categories to choose from and they way i am approaching the issue will require for me to write several check_value#. Is there a way to combine those two functions? so in the future if i have 5 or 7 categories i wont have to have a function for each. EXAMPLE
<script>
function check_value(val) {
var el = document.getElementById("imgBox1");
var img = imgs[val];
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/bike" + val + ".jpg";
el.style.display = "";
}
}
function check_value1(val) {
var el = document.getElementById("imgBox2");
var img = imgs[val];
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/tire" + val + ".jpg";
el.style.display = "";
}
}
</script>
HTML
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" value="1" onclick='check_value(0)'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1)'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(2)'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" value="1" onclick='check_value1(0)'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value1(1)'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value1(2)'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">
try this, updated
make image name as bike#.jpg , tire#.jpg
bike0.jpg, bike1.jpg, bike2.jpg....
function check_value(val, id, type) {
var el = document.getElementById("imgBox" + id);
if (val>0 && val<4) { //will trigger when [1,2,3]
el.src = "images/"+ type + val + ".jpg";
el.style.display = "";
}
}
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" value="1" onclick='check_value(0, 1, "bike")'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1, 1, "bike")'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(2, 1, "bike")'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" value="1" onclick='check_value(0, 2, "tire")'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value(1, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value(2, 2, "tire")'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">
Here is a fiddle for you, using custom HTML attributes, and the jQuery Javascript library:
Obviously you'd want to actually set the image's source, rather than displaying the url in a paragraph, but you get the idea, I'm sure.
// html
<input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/1.jpg" /> First<br>
<input type="radio" name="tire" img-preview="tire-preview" img-loc="tire/2.jpg" /> Second<br>
<p id="tire-preview">
Load: -
</p>
<input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/1.jpg" /> Uno<br>
<input type="radio" name="wheel" img-preview="wheel-preview" img-loc="wheel/2.jpg" /> Dos<br>
<p id="wheel-preview">
Load: -
</p>​
// js
$("input[type=radio]").click(function(){
var imageUri = "http://site.com/images/" + $(this).attr("img-loc");
$("#" + $(this).attr("img-preview") ).text("Load: " + imageUri);
});​
You can use this
<script>
function call(formNo,val)
{if()//give your checkings here according to what you want
{}
alert(formNo+" "+val); //just for example what values you are getting
}
</script>
<h2>Choose a bike</h2>
<form name="builder" id="1">
<input type="radio" name="field" value="1" onclick='check_value(1,0)'/> KAWASAKI KX 450F<br />
<input type="radio" name="field" value="2" onclick='check_value(1,1)'/> 2010 Yamaha Road Star S<br />
<input type="radio" name="field" value="3" onclick='check_value(1,2)'/> Aprilia RSV4<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire" id="2">
<input type="radio" name="field" value="1" onclick='check_value1(2,0)'/> Michelin Pilot Road 3 Tires<br />
<input type="radio" name="field" value="2" onclick='check_value1(2,1)'/> Dunlop Roadsmart Sport-Touring Tires<br />
<input type="radio" name="field" value="3" onclick='check_value1(2,2)'/> Pirelli Scorpion Trail Tires<br />
</form>
<img id="imgBox2" src="#" style="display:none">

Categories