I am looking to redirect the user to the URL specified in the select value. For styling to the select I had to go a custom route hence the way its set-up. Am I approaching it wrong, if so what is the most efficient way to approach it?
HTML
<form>
<span class="dropdown-el" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
<input type="radio" name="services" value="Relevance" checked="checked" id="services">
<label for="services">Select one ...</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-best"><label for="sort-best">Option 1</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-low"><label for="sort-low">Option 2</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-high"><label for="sort-high">Option 3</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-brand"><label for="sort-brand">Option 4</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-name"><label for="sort-name">Option 5</label>
</span>
<button type="submit" class="hero-form-btn" onClick="WinOpen();">Go →</button>
</form>
Jquery/JavaScript
<script>
jQuery(function($) {
$('span').on('change', function() {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
</script>
I've looked through it so many times that I'm beginning to get lost. Any help is much appreciated.
You should take the value from the selected radio button:
jQuery(function($) {
$('span').on('change', function(val) {
var url = $("input[name='services']:checked").val();
if (url) {
window.location = url;
}
return false;
});
});
You can test it here:
https://jsfiddle.net/6k8cnxhp/
What is the purpose of submitting and what actually happens besides redirecting the user?
If it just for redirect, change the button type to button instead of submit since when you hit submit you refresh the page and any code assign to the function (winOpen) won't be execute...
If you don't need to actually submit the form, your code can be something like that:
let url = document.querySelectorAll('input[name="services"]');
for (let i=0; i < url.length; i++) {
url[i].addEventListener('change', function() {
document.querySelectorAll('form > button')[0].setAttribute('onclick', 'window.location.assign("'+url[i].value+'")');
});
};
<form>
<span class="dropdown-el" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
<input type="radio" name="services" value="Relevance" checked="checked" id="services">
<label for="services">Select one ...</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-best"><label for="sort-best">Option 1</label>
<input type="radio" name="services" value="http://www.microsoft.com" id="sort-low"><label for="sort-low">Option 2</label>
<input type="radio" name="services" value="http://www.stackoverflow.com" id="sort-high"><label for="sort-high">Option 3</label>
<input type="radio" name="services" value="http://www.mdn.com" id="sort-brand"><label for="sort-brand">Option 4</label>
<input type="radio" name="services" value="http://www.cnn.com" id="sort-name"><label for="sort-name">Option 5</label>
</span>
<button type="button" class="hero-form-btn">Go →</button>
</form>
Your button is in the form tag with a type="submit". Submit adds http://yoursite.com?yourQueryToServer the query string to your URL to be sent to the server.
If you want to leave the button in the form tag, change the type="button"
Try this.
I didn't quite understand why you have a submit button, but you reload onChange, so I changed that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<form>
<span class="dropdown-el" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
<input type="radio" name="services" value="Relevance" checked="checked" id="services">
<label for="services">Select one ...</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-best"><label
for="sort-best">Option 1</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-low"><label for="sort-low">Option
2</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-high"><label
for="sort-high">Option 3</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-brand"><label
for="sort-brand">Option 4</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-name"><label
for="sort-name">Option 5</label>
</span>
<button type="button" class="hero-form-btn" onClick="WinOpen();">Go →</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$('span').on('change', function (val) {
let url = $("input[name='services']:checked").val();
if (url) {
window.location = url;
}
});
function changePage() {
window.location = url;
}
</script>
</body>
</html>
or with reloading onChange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<form>
<span class="dropdown-el" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
<input type="radio" name="services" value="Relevance" checked="checked" id="services">
<label for="services">Select one ...</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-best"><label
for="sort-best">Option 1</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-low"><label for="sort-low">Option
2</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-high"><label
for="sort-high">Option 3</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-brand"><label
for="sort-brand">Option 4</label>
<input type="radio" name="services" value="http://www.google.com" id="sort-name"><label
for="sort-name">Option 5</label>
</span>
<button type="button" class="hero-form-btn" onClick="WinOpen();">Go →</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
var url = null
jQuery(function ($) {
$('span').on('change', function (val) {
var url = $("input[name='services']:checked").val();
if (url) {
window.location = url;
}
return false;
});
});
function changePage() {
window.location = url;
}
</script>
</body>
</html>
o button click option place windowlocation.href I modify the code <script>
var url = null
jQuery(function ($) {
// $('span').on('change', function (val) {
$('.hero-form-btn').on('click',function(e){
var url = $("input[name='services']:checked").val();
if (url) {
window.document.location.href = url;
//window.location = url;
}
//});
return false;
});
});
function changePage() {
window.location = url;
}
</script>
Related
I am learning DOM and wanted to create a simple JavaScript with Html quiz (for exercise). Now the problem I'm having is that when I hit submit, all of the answers are right instead of one being right and 3 being wrong. I think it is a problem with my html and the way I assigned the ID's to the different tags but I cannot figure out what I am doing wrong.
Code
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
<script src="quiz.js">
</script>
</body>
</html>
JavaScript
quizForm.addEventListener("submit",function(event) {
event.preventDefault();
var grabAnswer = document.getElementById('red')
console.log(grabAnswer.id);
if (grabAnswer.id == 'red') {
console.log('correct!');
}else{
console.log('wrong');
}
})
Thanks.
You can do this two ways
get the selected value and see if it's correct
get the correct answer and see if it's selected
The existing answer handles (1) so here's the solution for the other option.
Taking your original code, change
if (grabAnswer.id == 'red') {
to
if (grabAnswer.checked) {
(where grabAnswer is document.getElementById('red'))
quizForm.addEventListener("submit", function(event) {
event.preventDefault();
// get the correct answer
var grabAnswer = document.getElementById('red')
// see if it's been selected
if (grabAnswer.checked) {
console.log('correct!');
} else {
console.log('wrong');
}
})
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
Problem is that you always take the red in your grapAnswer, but you have to use var grabAnswer = document.querySelector('input[name="color"]:checked');
Demo
var quizForm = document.getElementById("quizForm")
quizForm.addEventListener("submit", function(event) {
event.preventDefault();
var grabAnswer = document.querySelector('input[name="color"]:checked');
console.log(grabAnswer.id);
if (grabAnswer.id == 'red') {
console.log('correct!');
} else {
console.log('wrong');
}
})
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
<script src="quiz.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Page Title</title>
</head>
<body>
<h1> What is your favorite color?</h1>
<form id="myForm">
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<button type="button" id="button">Submit</button><br>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$("#button").click(function() {
if($('input[name=color]:checked', '#myForm').val()=='red')
{
alert('Succesfully!');
}
else
{
alert("No");
}
});
});
</script>
Can you try this code?
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>
<!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>
I'm trying to figure out how to get my radio buttons to direct me to the webpage after you make your selection and hit submit. This is the code I have thus far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Buttons</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose a Website:</legend>
<label for="ESPN.com">ESPN.com</label>
<input type="radio" name="website" id="ESPN.com" value="http://espn.go.com">
<label for="Facebook.com">Facebook.com</label>
<input type="radio" name="website" id="Facebook.com" value="https://www.facebook.com">
<label for="Apple.com">Apple.com</label>
<input type="radio" name="website" id="Apple.com" value="http://www.apple.com">
</fieldset>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
You should add the event onclick = "document.location.href='somepage.htm'" inside your input radio tag
You can use JQuery like this:
$('input:radio[name="website"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == '1') {
window.location = "http://espn.go.com";
}
else if ($(this).is(':checked') && $(this).val() == '2'){
window.location = "https://www.facebook.com";
}
else if ($(this).is(':checked') && $(this).val() == '3'){
window.location = "http://www.apple.com";
}
});
HTML Radio Buttons
<input type="radio" name="website" id="ESPN.com" value="1">
<label for="Facebook.com">Facebook.com</label>
<input type="radio" name="website" id="Facebook.com" value="2">
<label for="Apple.com">Apple.com</label>
<input type="radio" name="website" id="Apple.com" value="3">
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this), '_blank'); return false;">
<b>Where do you need to go?:</b>
<p>
<label><input type="radio" name="site" value="http://yahoo.com/">Yahoo</label>
<label><input type="radio" name="site" value="http://google.com/">Google</label>
<label><input type="radio" name="site" value="http://amazon.com/">Amazon</label>
<label><input type="radio" name="site" value="http://cnn.com/" checked>CNN</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
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.