How can I Validate my form using class only? - javascript

I have radio buttons that has a same class.
and this radio buttons is dynamic, that's why I am thinking on using the class for validation.
Here is my code.
$('#listening_choices_wrapper').on('submit', function(e) {
e.preventDefault();
$(".validation_radio").each(function() {
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="listening_choices_wrapper">
<div class="listening_question_scenario">
<p id="display_question_scenario">
1. Question 1?
</p>
</div>
<div id="question_choices" class="listening_question_choice">
<input type="radio" class="validation_radio" name="answer_choice_0" value="17">
<label>Test 1</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="18">
<label>Test 2</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="19">
<label>Test 3</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="20">
<label>Test 4</label>
</div>
<div class="listening_question_scenario">
<p id="display_question_scenario">
2. Question 2?
</p>
</div>
<div id="question_choices" class="listening_question_choice">
<input type="radio" class="validation_radio" name="answer_choice_1" value="17">
<label>Test 5</label>
<input type="radio" class="validation_radio" name="answer_choice_1" value="18">
<label>Test 6</label>
<input type="radio" class="validation_radio" name="answer_choice_1" value="19">
<label>Test 7</label>
<input type="radio" class="validation_radio" name="answer_choice_1" value="20">
<label>Test 8</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</body>
</html>
How can I validate them? so that the user can't submit it.
Any help would be really appreciated.

You can add the required attribute to all the input tags for native browser validation:
<div id="question_choices" class="listening_question_choice">
<input type="radio" class="validation_radio" name="answer_choice_0" value="17" required>
<label>Test 1</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="18" required>
<label>Test 2</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="19" required>
<label>Test 3</label>
<input type="radio" class="validation_radio" name="answer_choice_0" value="20" required>
<label>Test 4</label>
</div>
But to answer your question, I wrote this jQuery script:
$('#listening_choices_wrapper').on('submit', function(e) {
$('.error').remove()
e.preventDefault();
$('.listening_question_choice').each((i, e) => {
let valid = false
$(e).find('.validation_radio').each((i ,e) => {
if($(e).prop("checked")) {
valid = true
}
})
if (!valid) {
$(e).append('<div class="error" style="color: red;">Error: this radio is required!</div>')
}
})
});
I hope this helps!

I would suggest that you wrap each bank of answers in a fieldset element, and put the class on that. You can then iterate over those with each (as you did in your code) and look to see whether there are no input elements that are :checked
if($(this).find("input:checked").length == 0){
// no answer given
}
You can then also use some sort of label to improve the message to the user - and if any answers missed only then call e.preventDefault().
Live example below:
$('#listening_choices_wrapper').on('submit', function(e) {
var missingAnswers = [];
$(".validation_radio").each(function() {
if($(this).find("input:checked").length == 0){
missingAnswers.push($(this).data("label"));
}
});
if(missingAnswers.length > 0){
e.preventDefault();
alert(`You are missing answers to: ${missingAnswers}`)
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="listening_choices_wrapper">
<div class="listening_question_scenario">
<p id="display_question_scenario">
1. Question 1?
</p>
</div>
<div id="question_choices" class="listening_question_choice">
<fieldset class="validation_radio" data-label="answer1">
<input type="radio" name="answer_choice_0" value="17">
<label>Test 1</label>
<input type="radio" name="answer_choice_0" value="18">
<label>Test 2</label>
<input type="radio" name="answer_choice_0" value="19">
<label>Test 3</label>
<input type="radio" name="answer_choice_0" value="20">
<label>Test 4</label>
</fieldset>
</div>
<div class="listening_question_scenario">
<p id="display_question_scenario">
2. Question 2?
</p>
</div>
<div id="question_choices" class="listening_question_choice">
<fieldset class="validation_radio" data-label="answer2">
<input type="radio" name="answer_choice_1" value="17">
<label>Test 5</label>
<input type="radio" name="answer_choice_1" value="18">
<label>Test 6</label>
<input type="radio" name="answer_choice_1" value="19">
<label>Test 7</label>
<input type="radio" name="answer_choice_1" value="20">
<label>Test 8</label>
</fieldset>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</body>
</html>

Related

Radio buttons in HTML form not working properly

I'm learning Javascript and forms in HTML and I knew about radio buttons. But the problem is when I'm coding 3 radio buttons for testing, somehow it doesn't work, and when I check "1" (it's a name) and I choose another one like "2", it doesn't uncheck "1"! Does my browser have a problem, or my code is wrong? I'm using the Microsoft Edge browser, and this is my code:
<form>
<label for="html">This one is Html </label>
<input type="radio" name="html" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="css" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="javscript" id="javascript" value="JAVASCRIPT">
</form>
Anyone know what is my problem?
name property is as a group. so if you set the same name on radio buttons, they are being in same group.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="group1" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="group1" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="group1" id="javascript" value="JAVASCRIPT">
</form>
This is simple, you just need to use the same name for each group, here i used codetype:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label for="html">This one is Html </label>
<input type="radio" name="codetype" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="codetype" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="codetype" id="javascript" value="JAVASCRIPT">
</form>
</body>
</html>
Please you can use radio button that time all radio button name set same then you select at that time one radio button.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="skill" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="skill" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="skill" id="javascript" value="JAVASCRIPT">
</form>
Just use the same name attribute value for each group.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="radio_button" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="radio_button" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="radio_button" id="javascript" value="JAVASCRIPT">
</form>

How to add up values of radio buttons in Javascript

I'm a newbie coder and cannot for the life of me figure out how to add up values for radio buttons below - any help would be greatly appreciated!
I am trying to create a diabetes screening assessment tool - where you will be able to assign different values to different risk factors.
You would need to use JavaScript to accomplish this.
Here's one way to do it:
Listen for the form's submit event
Prevent the default (so that the form doesn't get sent to the server)
Grab the value from each field. Fields use the name attribute from the HTML
Use parseInt on each field because they'll be strings
Add them up
Display the result (in this example, in the console)
const form = document.querySelector('form')
form.addEventListener('submit', event => {
event.preventDefault()
const total =
parseInt(form.age.value) +
parseInt(form.bmi.value) +
parseInt(form.famhistory.value) +
parseInt(form.diet.value)
console.log(total)
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<link rel="stylesheet" type="text/css" href="fma.css">
<script src="fma.js"></script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit" id="submit">
</div>
</form>
</body>
</html>
If you plan on adding values, here is a more flexible approach.
The idea is to loop through each relevant input (those that are inside your fieldset with ID controls), regardless of its name, so that if you add more checks, the same code will still work.
Create a score variable and increment it with the value of each input that is checked.
Be careful, you have the value 0 TWICE for the BMI check
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var inputs = document.querySelectorAll('#controls input');
var score = 0;
inputs.forEach(function(input) {
if (input.checked) {
score += parseInt(input.value, 10);
}
});
console.log(score);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<script>
</script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory"
<label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit">
</div>
</form>
</body>
</html>

radio button is selecting multiple values

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css">
<script>
var xmlh,url;
xmlh = new XMLHttpRequest();
url="AnswerFile.txt";
xmlh.onreadystatechange=function(){
if(xmlh.readyState == 4 && xmlh.status ==200){
var myArr =JSON.parse(xmlh.responseText);
myFunctuion(myArr);
}
};
xmlh.open("GET",url,true);
xmlh.send();
function myFunctuion(arr){
var dom=document.getElementById("demo");
var cha=document.getElementById("radio1");
var chb=document.getElementById("radio2");
var chc=document.getElementById("radio3");
dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
cha.innerHTML = arr[0].ChA ;
chb.innerHTML = arr[0].ChB ;
chc.innerHTML = arr[0].ChC ;
}
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>
i get my all question and option from text file by JSON and i succeeded it .
But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked .
what my problem in code ? what i do? and why cause this problem ?
?** for style i use W3.CSS **?
Your HTML input radio should have the same name attribute, like this:
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Your radio buttons should all use the same name :)
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Name of your radio input fields should be same for specific question's options. Like below:
First group of radios
<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>
Second group of radios
<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>

How do i add page numbers on html

How can I add page numbers to a quiz I am making, it needs to all be in the same file though? So, after the first x many questions have been answered, you click next, to go onto the next page after that you go onto the answers? But all in the same code? How can I do this? I've tried looking on various websites to find this but I cannot see how!
Thanks,
Nick
Code:
<h1>Final Quiz for Lip building</h1>
<form action="grade.php" method="post" id="quiz">
<ol>
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
<li>
<h3>Internet Explorer 6 was released in...</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) 2001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) 1998</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) 2006</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) 2003</label>
</div>
</li>
<li>
<h3>SEO Stand for...</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) Secret Enterprise Organizations</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Special Endowment Opportunity</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Search Engine Optimization</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
<li>
<h3>A 404 Error...</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
<label for="question-4-answers-A">A) is an HTTP Status Code meaning Page Not Found</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
<label for="question-4-answers-B">B) is a good excuse for a clever design</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" />
<label for="question-4-answers-C">C) should be monitored for in web analytics</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" />
<label for="question-4-answers-D">D) All of the above</label>
</div>
</li>
<li>
<h3>Your favorite website is</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
<label for="question-5-answers-A">A) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
<label for="question-5-answers-B">B) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
<label for="question-5-answers-C">C) CSS-Tricks</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
<label for="question-5-answers-D">D) CSS-Tricks</label>
</div>
</li>
</ol>
<input type="submit" value="Submit Quiz" />
</form>
and
PHP: `
<h1>Final Quiz for Lip building</h1>
<?php
$answer1 = $_POST['question-1-answers'];
$answer2 = $_POST['question-2-answers'];
$answer3 = $_POST['question-3-answers'];
$answer4 = $_POST['question-4-answers'];
$answer5 = $_POST['question-5-answers'];
$totalCorrect = 0;
if ($answer1 == "B") { $totalCorrect++; }
if ($answer2 == "A") { $totalCorrect++; }
if ($answer3 == "C") { $totalCorrect++; }
if ($answer4 == "D") { $totalCorrect++; }
if ($answer5) { $totalCorrect++; }
echo "<div id='results'>$totalCorrect / 5 correct</div>";
?>
</div>`
EDIT: THE NEXT CODE I ADDED WAS:
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) Seals End Olives</label>
</div>
</li>
<script>
function getValue()
{
var x=document.getElementById("page_2");
alert(x.innerHTML);
}
</script>
<body>
<h1 id="page_2" onclick="getValue()">Click me to proceed!</h1>
</body>
</div>
</div>
<div id="page_2">
<div id="page-wrap">
<li>
<h3>A 404 Error...</h3>
Use specific <div> with id for every part & hide all other <div> except first part using css. Then use javascript function for showing every part sequentially. When showing 2nd part hide all other part using getElementById, do it all other part & store your result in a static variable, increase it in every part sequentially, hope it will work. check this code -
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#test2{display:none;}
#test3{display:none;}
</style>
<script>
function test1(){
document.getElementById('test2').style.display = 'block';
document.getElementById('test1').style.display = 'none';
}
</script>
</head>
<body>
<div id="test1" onclick='test1();'>testing1</div>
<div id="test2">testing2</div>
<div id="test3">testing3</div>
</html>

Can You See Something Missing In My Javascript File?

I'm attempting to recreate this JSfiddle locally on my machine:
http://jsfiddle.net/jakecigar/LM8Gd/1/
I don't understand though because it will goto the menu screen like on the fiddle above, but the animations will not happen and the question will not cycle through. It will only stay on the length? question and stay there and none of the buttons will do anything.
I have 3 files: index.html, js.js, and styles.css.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js.js"></script>
</head>
<body>
<!-- start questionaire -->
<form class="questionnaire">
<fieldset>
<h3>length?</h3>
<label>
<input name="length" value="5" type="radio" />Too big</label>
<label>
<input name="length" value="4" type="radio" />big</label>
<label>
<input name="length" value="3" type="radio" />medium</label>
<label>
<input name="length" value="2" type="radio" />small</label>
<label>
<input name="length" value="1" type="radio" />tiny</label>
</fieldset>
<fieldset>
<h3>width?</h3>
<label>
<input name="width" value="5" type="radio" />Too big</label>
<label>
<input name="width" value="4" type="radio" />big</label>
<label>
<input name="width" value="3" type="radio" />medium</label>
<label>
<input name="width" value="2" type="radio" />small</label>
<label>
<input name="width" value="1" type="radio" />tiny</label>
</fieldset>
<fieldset>
<h3>weight?</h3>
<label>
<input name="weight" value="5" type="radio" />Too big</label>
<label>
<input name="weight" value="4" type="radio" />big</label>
<label>
<input name="weight" value="3" type="radio" />medium</label>
<label>
<input name="weight" value="2" type="radio" />small</label>
<label>
<input name="weight" value="1" type="radio" />tiny</label>
</fieldset>
<button class="back" type="button">back</button>
</form>
<!-- end questionaire -->
</body>
</html>
styles.css:
#charset "utf-8";
/* CSS Document */
.questionnaire label {
display:block;
clear:both
}
.questionnaire fieldset:not(:first-child) {
display:none
}
js.js:
$(function () {
$(".questionnaire input[type='radio']").click(function () {
var fs = $(this).closest("fieldset"),
next = fs.nextAll('fieldset:first');
fs.slideUp('fast');
if (next.length) {
next.slideDown('fast')
} else {
alert("do some computation")
}
})
$(".questionnaire button.back").click(function(){
var fs=$(this).siblings(":visible"),
prev=fs.prevAll('fieldset:first');
if (prev.length){
fs.slideUp('fast')
prev.slideDown('fast')
}
})
})
It doesn't look like you've loaded jQuery into your page which js.js depends upon.
There should have been errors in the browser error console or debug console that point you in some useful direction. If you aren't looking there first when something doesn't work, that's one of the first things to learn.

Categories