hello i am new at html i am designing a quiz in html. this is example with 2 questions only.when i click a submit button i want to calculate marks show it in a alert box and then go to result.htm page .but when i click submit alert box shows answer but page is not redirected forward to result.htm.
my code is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.d1
{
background-color:#FFFFCC;
}
#Submit1
{
width: 67px;
}
</style>
<script language="javascript" type="text/javascript">
function Submit1_onclick() {
var i = 0;
var a = document.getElementById("Radio1");
if (a.checked == true) {
i++;
}
var b = document.getElementById("Radio8");
if (b.checked == true) {
i++;
}
alert(i);
}
</script>
</head>
<body>
<p>
</p>
<form name="f1" method="post" action="d://result.htm">
<div class="d1">
Q1 What is your name ?
<br />
a <input id="Radio1" name="R1" type="radio" value="t" />
b <input id="Radio2" name="R1" type="radio" value="f" />
c <input id="Radio3" name="R1" type="radio" value="f" />
d <input id="Radio4" name="R1" type="radio" value="f" /></div>
<br /> <br /> <br />
<div class="d1">
Q1 What is your Id ?
<br />
1 <input id="Radio5" name="R11" type="radio" value="V1" />
2 <input id="Radio6" name="R11" type="radio" value="r1" />
3 <input id="Radio7" name="R11" type="radio" value="as1" />
4 <input id="Radio8" name="R11" type="radio" value="pop1" /></div>
<br /> <br /> <br />
<div class="d1">
<input id="Submit1" type="submit" value="submit" onClick="return(Submit1_onclick())"/><br />
<br /> <br />
</form>
</body>
</html>
As the last line of your function call
<script language="javascript" type="text/javascript">
function Submit1_onclick() {
var i = 0;
var a = document.getElementById("Radio1");
if (a.checked == true) {
i++;
}
var b = document.getElementById("Radio8");
if (b.checked == true) {
i++;
}
alert(i);
location.href="result.htm";
}
</script>
This will redirect the page
Change your markup to this:
<input id="Submit1" type="submit" value="submit" onclick="Submit1_onclick();"/>
and add this to your javascript:
function Submit1_onclick() {
...
alert(i);
return true;
}
Returning true from an event handler will tell the browser to continue the default behavior (in this case, submit the form).
Sounds like you're trying to submit a POST between two static files in an IIS server, which you can't do. You can change the files to .aspx and it should work as expected.
Related
I am trying to check if the radio button is checked or not, and also I am trying to get the value but I do not know why it does not work. I saw a lot of post, video on internet and also some on this site, but nothing. So helpless I am posting this on the site.
This is my HTML file
function getValue(){
var checkAge = false;
for(var i=0; i<4; i++){
if(document.getElementById("age"+i).checked){
checkAge = true;
}
}
}
function loadFunctions() {
getValue();
}
window.onload = loadFunctions;
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="form">
<section id="age_question">
<h2>How old are you?</h2>
<label for="age-one">1-25</label>
<input type="radio" name="ageRange" id="age1" value="0"/>
<label for="age-two">26-40</label>
<input type="radio" name="ageRange" id="age2" value="5" />
<label for="age-three">41-60</label>
<input type="radio" name="ageRange" id="age3" value="8" />
<label for="age-four">60+</label>
<input type="radio" name="ageRange" id="age4" value="10" />
</section>
<section id="bmi">
<h2>What is your BMI?</h2>
<label for="bmi-level"><span>0-25</span></label>
<input type="radio" name="bmi_range" id="" value="0"/>
<label for="bmi-level"><span>26-30</span></label>
<input type="radio" name="bmi_range" id="" value="0" />
<label for="bmi-level"><span>31-35</span></label>
<input type="radio" name="bmi_range" id="" value="9" />
<label for="bmi-level"><span>35+</span></label>
<input type="radio" name="bmi_range" id="" value="10" />
</section>
<section id="family_history">
<h2>Does anybody in your family have Diabetes?</h2>
<label for="history"><span>No</span></label>
<input type="radio" name="f_history" id="history" value="0"/>
<label for="history"><span>Grandparent</span></label>
<input type="radio" name="f_history" id="history" value="7" />
<label for="history"><span>Sibling</span></label>
<input type="radio" name="f_history" id="history" value="15" />
<label for="history"><span>Parent</span></label>
<input type="radio" name="f_history" id="history" value="15" />
</section>
<section id="diet">
<h2>How would you describe your diet?</h2>
<label for="diet"><span>Low sugar</span></label>
<input type="radio" name="dietHabits" id="dietHabit" value="0"/>
<label for="diet"><span>Normal sugar</span></label>
<input type="radio" name="dietHabits" id="dietHabit" value="0" />
<label for="diet"><span>Quite high sugar</span></label>
<input type="radio" name="dietHabits" id="dietHabit" value="7" />
<label for="diet"><span>High sugar</span></label>
<input type="radio" name="dietHabits" id="dietHabit" value="10" />
</section>
<button onclick="getValue()">Get You BMI</button>
<p id="message"></p>
</form>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The first thing I'll suggest you do is to clear your browser cache, or launch the dev tools using F12 and check "Disable cache" on the "Network" tab.
Edit: Changed the button type, and made checkAge global.
Okay, the button does submit the form, making all changes to the variable lost after reload. To fix that, change the button type to just button, as:
<button type="button" onclick="getValue()">Get You BMI</button>
That way, it won't reload everytime you press the button. Another thing to do is make the checkAge variable global. that way is defined as false by default.
The "age"+i thing you did was starting the iteration with i=0, therefore giving the elementId as age0. This was making the element null.
To fix that, you can change the for-loop to for(var i=1; i<=4; i++) or using the same loop you've defined, but adding i by 1 before using it.
And the code would be like so:
var checkAge = false;
function getValue(){
for(var i=0; i<4; i++){
var index = i + 1
var element = document.getElementById("age"+index)
if(element.checked){
checkAge = true;
alert("The value is"+element.value)
}
}
}
Thanks.
Make the starting index be 1 instead of 0, since your ID selectors start from 1:
function getValue() {
var checkAge = false
for (var i = 1; i <= 4; i++) {
if (document.getElementById('age' + i).checked) {
checkAge = true
}
}
console.log(checkAge)
return checkAge
}
JSFiddle Demo: https://jsfiddle.net/a3fzd2kv/2/
You don't need to check the checked value of each of the radio buttons.
Here is a simpler solution:
var form = document.getElementById('form');
var ageRange = form.ageRange.value;
The value will equal to an empty string ('') when nothing is checked. Therefore, the logic for checkAge could be simplified to:
var checkAge = ageRange !== '';
your for loop is looping through i from 0 - 3, so your document.getElementById("age"+i) will look for id="age0", "age1", "age2, "age3".
Change your 'for' loop to for(var i=1; i<5; i++)
The following is a simple javascript code to set a value into a textbox. But, it doesn't seem to work. I am not able to find the flaw. Also, the javascript is working only in IE and not in Chrome/Firefox. How do I get out of this trouble?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function reportValue()
{
var form = document.getElementById("billgen");
var radioArray = form["time"];
var months;
for(var i=0;i<radioArray.length;i++)
{
if(radioArray[i].checked)
{
months = radioArray[i].value;
break;
}
}
if(months == "1")
{
e=31*100;
form["total"].value = e;
//document.getElementById("total").value = e; => not working as well
return true;
}
else{
alert("Are you sure the instructor is " + months + "?\nYou may be underestimating the instructor!");
return false;
}
}
</script>
</head>
<body bgcolor="white">
<fieldset>
<legend>Bill Generation</legend>
<form id="billgen" method="post">
<label><input type="radio" name="time" value="1" checked /> 1 Month </label>
<label><input type="radio" name="time" value="3" /> 3 Month </label>
<label><input type="radio" name="time" value="6" /> 6 Month </label>
<label><input type="radio" name="time" value="12" /> 1 Year </label>
<input type="submit" value="submit" onclick="reportValue();" />
<p>
<input type="text" id="total" name="total" />
</p>
</form>
</fieldset>
</body>
</html>
Clicing on a <input type="submit"/> causes the page to reload, so instead of "submit", either use the <button> element or use an <input type="button"/>.
Here is your code with getElementById( instead of getElementById[: JSFiddle and it works.
Just move your code to the end of your html, just before the </body> and it should work, I think the problem is that you are asigning the form to a variable before the form even exists.
JS :
function checkValue(option) {
if (option == "4") {
alert("Correct");
var pop = parseInt(window.name++);
alert(pop);
window.location="q2.html";
}
else {
alert("False, Option (4) is the Correct Answer.");
window.location="q2.html";
}
}
Html :
<html>
<input type="radio" name="option_1" value="1" onclick="checkValue(this.value);" /> Hyper Text Markup Languages <br /> <br />
<input type="radio" name="option_2" value="2" onclick="checkValue(this.value);" /> Highest Text Markup Language <br /> <br />
<input type="radio" name="option_3" value="3" onclick="checkValue(this.value);" /> Hyper Total Markup Language <br /> <br />
<input type="radio" name="option_4" value="4" onclick="checkValue(this.value);" /> Hyper Text Markup Language <br /> <br />
</html>
First thing, I'd clean up the HTML code a bit... I assume the four radio buttons are all possible answers to one question, in which case they should all have the same name (not value) so that you can only choose one answer; then in the script I'd would need to use more information than just the value of the checked answer, so instead of sending this.value to the function, I'd just send this:
<input type="radio" name="question_1" value="option_1" onclick="checkValue(this);" /> Hyper Text Markup Languages <br /> <br />
<input type="radio" name="question_1" value="option_2" onclick="checkValue(this);" /> Highest Text Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_3" onclick="checkValue(this);" /> Hyper Total Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_4" onclick="checkValue(this);" /> Hyper Text Markup Language <br /> <br />
In the script, to disable the radio buttons after they've been clicked, I would add a function that goes through each radio button that has the same name (as mentioned above) as the one that's been clicked, and disable it:
var radiobuttons = document.getElementsByName(option.name);
for(i = 0; i < radiobuttons.length; i++) {
radiobuttons[i].disabled = true;
}
Then, of course, the alert to let the visitor know whether they've got the right answer:
if (option.value == "option_4") {
alert("Correct");
} else {
alert("False, Option (4) is the Correct Answer.");
}
Here's a fiddle: http://jsfiddle.net/Niffler/nyqk6gga/
(I'm assuming you don't want to use jQuery; otherwise there would be much nicer-looking ways to do this...)
$(document).delegate(".rndmyradio","click",function () {
$(this).hide();
//if you want values of selected
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="rndmyradio" type="radio" name="option_1" value="1" /> <label>Hyper Text Markup Languages </label><br /> <br />
2. <input class="rndmyradio" type="radio" name="option_2" value="2" /> Highest Text Markup Language <br /> <br />
3. <input class="rndmyradio" type="radio" name="option_3" value="3" /> Hyper Total Markup Language <br /> <br />
4. <input class="rndmyradio" type="radio" name="option_4" value="4" /> Hyper Text Markup Language <br /> <br />
I try to make quiz with for example 4 questions (more then one). There is 4 radiobuttons for each question and one continue button (input type="submit"). I want that when you click on continue button you will be redirected to some page (success.html) but only when all question were answered correctly. When you make some mistake in questions and click continue button it will reload quiz page.
I have tried to do this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<h3>1. otazka: otazocka</h3>
<input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> Yes
<input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> No
<input type="radio" name="otazka1e" value="y" onClick="toggle(this)" /> spravna
<input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> asda
<br />
<input type="submit" id="continue" value="Continue" onClick=""/>
<script>
var continue_button = document.getElementById('continue');
function toggle(switchElement) {
if (switchElement.value == 'y')
continue_button.setAttribute("onClick", "window.location.href='http://www.google.sk'");
else
continue_button.setAttribute("onClick", "window.location.href='http://www.facebook.com'");
}
</script>
</body>
</html>
But it works only on one question.
I will be glad for some help.
Thanks.
Thanks for answer. But when I choose radiobutton and click on continue it didnt redirect me to any page. So I try this
<label><input type="radio" name="otazka1" value="n" /> false</label>
<label><input type="radio" name="otazka1" value="n" /> false</label>
<label><input type="radio" name="otazka1" value="y" /> true</label>
<label><input type="radio" name="otazka1" value="n" /> false</label>
<input type="submit" id="continue" value="Continue" />
<script>
var continue_button = document.getElementById('continue');
continue_button.onclick = function(event) {
var everything_OK = true;
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type != "radio")
continue;
var should_be = inputs[i].value == "y";
if (inputs[i].checked != should_be) {
everything_OK = false;
break;
}
}
if (everything_OK) {
// this is not a good success-page
continue_button.setAttribute("onClick", "window.location.href='succes.html'");
} else {
continue_button.setAttribute("onClick", "window.location.href='pop.html'");
}
};
</script>
but now I must click to continue button twice. Can you help me?
You will need to loop through all your questions and look whether they are checked correctly when the Continue-button is pressed, instead of changing the full validation state of the form when only one answer was selected. Try this:
<label><input type="radio" name="otazka1" value="n" /> Yes</label>
<label><input type="radio" name="otazka1" value="n" /> No</label>
<label><input type="radio" name="otazka1" value="y" /> spravna</label>
<label><input type="radio" name="otazka1" value="n" /> asda</label>
...
<input type="submit" id="continue" value="Continue" />
<script>
var continue_button = document.getElementById('continue');
continue_button.onclick = function(event) {
var everything_OK = true;
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type != "radio")
continue;
var should_be = inputs[i].value == "y";
if (inputs[i].checked != should_be) {
everything_OK = false;
break;
}
}
if (everything_OK) {
// this is not a good success-page
window.location.href = "http://www.facebook.com");
} else {
window.location.href = "http://www.google.sk";
}
};
</script>
I want to select a radio button from javascript. I am using this simple html file to test the issue. The code below works correctly on firefox and chrome, however it does not work in IE (no version works). I would like to know why the supplied code does not work on IE, and how to select a radio button in IE?
<html>
<head>
<script type="text/javascript">
function chooseOne()
{
var randomChoice = Math.round(Math.random() * 2);
if(randomChoice == 0)
{
document.getElementById("test0").checked = true;
}
else if (randomChoice == 1)
{
document.getElementById("test1").checked = true;
}
else
{
document.getElementById("test2").checked = true;
}
}
</script>
</head>
<body>
<input type="radio" id="test0" name="test" value="a" /> A<br />
<input type="radio" id="test1" name="test" value="b" /> B<br />
<input type="radio" id="test2" name="test" value="c" /> C<br />
<input type="button" name="click" value="CHOOSE" onclick="javascript:chooseOne()" />
</body>
Thanks in Advance,
Spi
First of all, you should give all your radio buttons the same name, otherwise they will act as if they are independent buttons:
<input type="radio" name="test" id="test0" value="a" /> A<br />
<input type="radio" name="test" id="test1" value="b" /> B<br />
<input type="radio" name="test" id="test2" value="c" /> C<br />
I'm guessing this is also the source of your problem. Further, once you do this, you only need to set one radio button's checked to true, that will automatically remove the selection from other buttons.
I'm not certain, but possibly you have to tell IE that your onclick code is in javascript like this:
<input type="button" name="click" value="CHOOSE" onclick="javascript:chooseOne()" />
One problem:
var randomChoice = Math.round(Math.random() * 2);
will always yield to 1