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 />
Related
Well I am trying to build a web page that has set of radio buttons. I am using jquery to check if all the radio buttons are checked or not. Here is the code:
<body>
<p class="Cal">Welcome,</p>
<hr />
<p class="Radio1">Answer the questions below. You will find the results after clicking 'Check my score'.</p>
<hr />
<form method="post">
<p class="Question">1. Do you sleep early at night? (Anywhere around 9-10pm)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_0" />
</span></label>
<span class="Radio"> Yes
<br />
<label>
<input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Sometimes" id="RadioGroup1_2" />
Sometimes </label>
</span><br />
</p>
<p class="Question">2. Do you wake up early in morning?(Anywhere around 5-7am)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup2" value="Yes" id="RadioGroup2_0" />
Yes </span></label>
<span class="Radio"><br />
<label>
<input type="radio" name="RadioGroup2" value="No" id="RadioGroup2_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="Sometimes" id="RadioGroup2_2" />
Sometimes
</label>
</span><br />
</p><input type="submit" value="Check my score" /></form></body>
Well there are 30 such questions. And my jquery code is as follows:
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.Radio').each(function () {
// Question text
var Question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(Question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
else{
msg = "Done!";
alert(msg);
}
return validate;
});
Now I tried all ways possible to make this work. But even after I check radio button for each answer I keep on getting the popup saying "Please answer the following questions:" and then a blank list. I never get the message "Done!" even though answer for all the questions are checked.
Where is the fault?
You can use the HTML5 required attribute, which is better option.
You can also use JavaScript loop and retrieve the value from each radio group, using
$("input:radio[name=radiogroupX]:checked")
I have a div that is hidden by inline styling on a form. I would like to have the div display when a user checks the "Other" checkbox. Would someone look at my code? It does not work. I think it might be do to my markup, but if it is the javascript code, let me know. Thank you for any help.
html:
<div class="item">
<label>How did you hear about us? <span class="req">*</span></label>
<br />
<input type="checkbox" value="Newspaper" id="CAT_Custom_510976_0" name="CAT_Custom_510976" />
Newspaper<br />
<input type="checkbox" value="Direct Mail" id="CAT_Custom_510976_1" name="CAT_Custom_510976" />
Direct Mail<br />
<input type="checkbox" value="Radio" id="CAT_Custom_510976_2" name="CAT_Custom_510976" />
Radio<br />
<input type="checkbox" value="Billboard" id="CAT_Custom_510976_3" name="CAT_Custom_510976" />
Billboard<br />
<input type="checkbox" value="Online Search" id="CAT_Custom_510976_4" name="CAT_Custom_510976" />
Online Search<br />
<input type="checkbox" value="Friend" id="CAT_Custom_510976_5" name="CAT_Custom_510976" />
Friend<br />
<input type="checkbox" value="Social Media" id="CAT_Custom_510976_6" name="CAT_Custom_510976" />
Social Media<br />
<input type="checkbox" value="Other..." id="CAT_Custom_510976_7" name="CAT_Custom_510976" />
Other...
</div>
<div style="display: none;" id="other" class="item">
<label for="CAT_Custom_510977">Other:</label>
<br />
<textarea onKeyDown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510977" name="CAT_Custom_510977"></textarea>
</div>
Javascript:
// Hide or show textarea if the other checkbox field is checked
var voucher = document.getElementById("CAT_Custom_510976_7");
function ShowCCFields(val) {
if (!document.getElementById('other'))
return;
if (voucher.checked == true)
document.getElementById('other').style.display = 'inline';
else{
document.getElementById('other').style.display = 'none';
}
}
You never actually call the function you created. To make your function run when the checkbox is clicked you should change your javascript to:
var voucher = document.getElementById("CAT_Custom_510976_7");
voucher.addEventListener('click', ShowCCFields);
function ShowCCFields(val) {
if (!document.getElementById('other'))
return;
if (voucher.checked == true)
document.getElementById('other').style.display = 'inline';
else{
document.getElementById('other').style.display = 'none';
}
}
The line addEventListener is what then allows the function to run when you the voucher is clicked.
You never actually assign the function to be called.
voucher.onchange = ShowCCFields;
Also, remove the val that's in the parentheses, since you don't appear to be using it.
I have a form with three sections for variables: the first section is a text field that requires the user to enter a number lets call this user_number; next, is a set of radio buttons. three of them, that determine the 'type' variable of the output. we shall call this banner_type. finally, there is another set of radio buttons, this time, sixteen of them. these determine the 'style' variable of the output, and we can name it banner_style.
To get the script going, there is a button named Generate. it is NOT a submit button. finally, the output area is a div which will show the right results.
Now, the purpose of this form is to allow a user to choose a certain type of image, one that can change in type and style, and output different information for different users, hence the three variables.
If it helps, this is supposed to be simplify the selection of a Folding#Home sig banner. the coding is as follows:
<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>
Image URL: <div id="URL" style=display:inline;></div>
<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {
*SOMETHING NEEDS TO GO HERE*
document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + banner_style + banner_type;
});
</script>
So my end goal is to have the basic image address, as shown at the end of the script, then the user number, which should be an exact copy of whatever the user inputs in the text field, then the banner style, which will look something like this:
&c1=000000&c2=000000&c3=000000&c4=000000&c5=000000
This will be different for each different banner_style. Each value represents a hex colour code for different elements on the image itself. Finally, the banner type, which will look something like this:
&bg=0
This will either be 0, 1, or 2.
At this point, i should make it clear that i hardly ever use javascript, so ill need everything explained to me clearly, so i can also learn from it. Also, if at all possible, id like this to be pure JS... none of that jQuery stuff, or similar.
Sheesh, no jQuery?
Let me give you the jQuery version first since its far easier.
// load when page is done loading
$(function(){
// jQuery is just like CSS in that you use selectors to target a node element
$("#Generate").on("click", function(){
// get form values for each style we need
var user = $('#user_number').val();
var style = $('form input[name=banner_type]:checked').val();
var type = $('form input[name=banner_style]:checked').val();
// set image variable by concatenating the values together
var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;
// insert image path using the image variable set above into element with id of "URL"
$("#URL").html( image );
});
}); // close jquery on page load
Now in plain JavaScript... here goes.
// have to iterate each group to obtain the value
// function has borrowed from http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
var user = document.getElementById('user_number').value;
var style = getCheckedValue('banner_style');
var type = getCheckedValue('banner_type');
// set image variable
var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;
// insert image into element node with ID of "URL"
document.getElementById("URL").innerHTML = image;
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.
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