After clicking calculate button, its not showing the return value rather showing this error: "Uncaught ReferenceError: calculateTotal is not defined". I am very new to JavaScript. Please help.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>2</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1> 02 </h1>
</div>
<div id="body">
<p>You probably want to retire someday so let's get started!</p>
<form name="retirement savings" action="#" OnClick="calculateTotal(amountNeeded.value, investNo, annContribute,inrate)">
How much money do you need to retire: <input type="text" name="savingsGoal"><br><br>
Initial Investment: <input type="text" name="initialInvestment"><br><br>
Annual Contribution: <input type="text" name="annualContribution"><br><br>
Expected Interest Rate: Select from the following please:<br><br>
<input type="radio" name="interestRate" value="1percent">1 Percent<br>
<input type="radio" name="interestRate" value="1.5percent">1.5 Percent<br>
<input type="radio" name="interestRate" value="2percent">2 Percent<br>
<input type="radio" name="interestRate" value="2.5percent">2.5 Percent<br>
<input type="radio" name="interestRate" value="3percent">3 Percent<br>
<input type="radio" name="interestRate" value="3.5percent">3.5 Percent<br>
<input type="radio" name="interestRate" value="4percent">4 Percent<br>
<input type="radio" name="interestRate" value="4.5percent">4.5 Percent<br>
<input type="radio" name="interestRate" value="5percent">5 Percent<br>
<input type="radio" name="interestRate" value="5.5percent">5.5 Percent<br>
<input type="radio" name="interestRate" value="6percent">6 Percent<br>
<input type="radio" name="interestRate" value="6.5percent">6.5 Percent<br><br>
<input type="button" onClick="calculateTotal(savingsGoal.value, initialInvestment, annualContribution,interestRate);" value="Calculate"> <input type="reset">
</form>
<br>
<hr>
<p>You can retire in years</p>
<p>with in the bank</p>
<hr>
</div>
<div id="footer"><br>
<a href="../index.html">Return to Main Menu</li>
</div>
</body>
</html>
JS:
/*Interest Radio Button*/
var interest_rate= new Array();
interest_rate["1percent"]=1;
interest_rate["1.5percent"]=1.5;
interest_rate["2percent"]=2;
interest_rate["2.5percent"]=2.5;
interest_rate["3percent"]=3;
interest_rate["3.5percent"]=3.5;
interest_rate["4percent"]=4;
interest_rate["4.5percent"]=4.5;
interest_rate["5percent"]=5;
interest_rate["5.5percent"]=5.5;
interest_rate["6percent"]=6;
interest_rate["6.5percent"]=6.5;
function getIntrestRate() {
var interestRadio = document.getElementsByName('interestRate');
for (i=0; i < interestRadio.length; i++) {
if (interestRadio[i].checked) {
user_input = interestRadio[i].value;
}
}
return interest_rate[user_input];
}
/*Calculation*/
function calculateTotal(savingsGoal.value, initialInvestment.value, annualContribution.value, interstRate.value)(){
if ((document.calc.savingsGoal.value == null || document.calc.savingsGoal.length == 0) ||
(document.calc.initialInvestment.value == null || document.calc.initialInvestment.length == 0)||
(document.calc.annualContribution.value == null || document.calc.rate.annualContribution.length == 0)){
alert("Please fill in required fields");
return false;
}
else
{
var amount = document.calc.savingsGoal.value;
var invest = document.calc.initialInvestment.value;
var yearly = document.calc.annualContribution.value / 1200;
var interest_rate= document.calc.getInterestRate.value;
document.calc.pay.value = amount * interest_rate / (1 - (1/(1 + intr), yearly)));
}
}
Your function has invalid definition. You have extra () after parameters inside ()
function calculateTotal(savingsGoal.value, initialInvestment.value,
annualContribution.value, interstRate.value)(){
//^^remove this
Update
Few points I just noted which stays invalid in your case. So just go through the code shown in this fiddle. I've updated both html and js. I've changed the logic of getting values to function.. Its a parameter less function now. Also getIntrestRate() is a function and you were trying to access it as a variable/element and the way you were calling it was wrong. There is a spelling mistake i.e. getInterestRate. Just go through the fiddle and please note that its not fully functional. Not sure what you are getting in intr variable at the end.
calculateTotal function is not defined properly because there is a syntax error in its signature.
make it
function calculateTotal(savingsGoal, initialInvestment, annualContribution, interstRate){
you can't access a property of an object here while defining a method.
Also there is an extra parenthesis ().
I think You Not Include Jquery Library file so you include jquery library file on header its working
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
or search latest version jquery library file include .
Related
I want to change the inline js function to a normal JS script for Chrome Extention.
example code
<!DOCTYPE html>
<html>
<body>
<p>Select your favorite browser:</p>
<form action="/action_page.php">
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Firefox">Firefox<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Opera">Opera<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Safari">Safari<br><br>
Your favorite browser is: <input type="text" id="result">
<input type="submit" value="Submit form">
</form>
<script>
function myFunction(browser) {
document.getElementById("result").value = browser;
}
</script>
</body>
</html>
This is what I tried but it's not working as expected
<!DOCTYPE html>
<html>
<body>
<p>Select your favorite browser:</p>
<form action="/action_page.php">
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" value="Firefox">Firefox<br>
<input type="radio" name="browser" value="Opera">Opera<br>
<input type="radio" name="browser" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" value="Safari">Safari<br><br>
Your favorite browser is: <input type="text" id="result">
<input type="submit" value="Submit form">
</form>
<script>
const browsers = document.getElementsByName("browser");
browsers.forEach(function(browser){
myFunction(browser.value);
});
function myFunction(browser) {
document.getElementById("result").value = browser;
}
</script>
</body>
</html>
How to solve is this. I want to change the value onChange/onClick of radioButton .
In your second example, you forgot to actually add the myFunction function as an event listener. For that, you should take a look at addEventListener.
Your script would have to be something like this:
<script>
const browsers = document.getElementsByName("browser");
browser.forEach(function(browser) {
browser.addEventListener('click', function() {
myFunction(browser);
});
});
function myFunction(browser) {
document.getElementById("result").value = browser;
}
</script>
The reason we have to create an anonymous function around myFunction is because we are calling it with a parameter. If we simply passed myFunction(browser), the function would simply be executed and not passed as a callback to the event listener
The following is very similar to the 1st answer, but I added some testing code for the OP to evaluate for future endeavors.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<body>
<!-- Modified from:
https://stackoverflow.com/questions/70467382/how-to-change-inline-onclick-function-of-radio-button-to-a-separate-script/704675066
-->
<p>Select your favorite browser:</p>
<!--
Following replaces: <form action="/action_page.php"> in original
Following FORM actions are for testing purposes ONLY
Replace with correct FORM actions when necessary
-->
<!-- <form action="javascript:alert('success')"> -->
<form action="javascript:submitParameters()">
<label><input type="radio" name="browser" value="Internet Explorer">Internet Explorer</label><br>
<label><input type="radio" name="browser" value="Firefox">Firefox</label><br>
<label><input type="radio" name="browser" value="Opera">Opera</label><br>
<label><input type="radio" name="browser" value="Google Chrome">Google Chrome</label><br>
<label><input type="radio" name="browser" value="Safari">Safari</label><br>
<br>
Your favorite browser is: <input type="text" id="result">
<br><input type="submit" value="Submit form">
</form>
<script>
const browsers = document.getElementsByName("browser");
browsers.forEach(function(browser, ndx) {
browser.addEventListener('click', function() { myFunction(browser, ndx); });
});
function myFunction(browser, ndx) {
document.getElementById("result").value = ndx+' : '+browser.value;
}
</script>
<script>
function submitParameters() { // for FORM submit testing purposes only
let tmp = document.getElementById('result').value;
// do nothing messages for results evaluation with a small error check test
if (tmp !== '') { alert('Selection: '+tmp); } else { alert('Selection is missing'); }
}
</script>
</body>
</html>
I always wanted to know what was being sent to the FORM on SUBMIT.
I added the 'javascript:alert' to the action to report this.
Same thing is accomplished with the 'javascript:function' shorter format
Passing invalid data is frowned upon and is best avoided.
I added a test in the 'submitParameters()' function to report a missing choice if no radio button is selected.
Sometimes the choice reported to the FORM via the SUBMIT is desired to be an index of the selection, numbered 0-4 in this example. I added code in the .forEach function that passes the index of the option selected. Totally unnecessary, but has a possible use in future codes.
Happy coding and Happy Holidays!
In your new code you need to add an event listener for each time the radio button is selected. Your code never calls the routine to change anything.
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++)
I have a problem in validating whether at least one checkbox is checked or not.
The same code is being used for a different form and its working perfectly but I can't figure why it doesn't on this form.
Script:
if(jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
}else{
$("#MOTFORMERROR").html("");
}
Html:
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input"/> EMS<br />
<input name="" type="checkbox" class="form-check-input"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>
The code in the block of the if statement is being run all the time, instead of the code in the block of the else statement, even if one or all checkboxes are checked!
your code does not show when the javascript is executed, maybe your checkboxes are not yet rendered when you look for them.
In fact if you run your code in the exact order you posted here is perfectly normal that your condition is always true.
If you put your code inside a function to be called after all the HTML is rendered everything works perfectly:
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input"/> EMS<br />
<input name="" type="checkbox" class="form-check-input"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>
<!-- ... -->
<button id="check_btn">Click me</button>
<!-- ... -->
<script>
var valid;
$('#check_btn').click(function() {
if ($('#MOTForm input[type=checkbox]:checked').length == 0) {
valid = false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
$("#MOTFORMERROR").html("");
}
});
</script>
Since the variable valid wasn't defined, there was an error in your initial code (see below). This error is visible in the browser console.
Uncaught ReferenceError: valid is not defined
Because of that error, the lines after valid = valid && false; are not being executed.
To fix this, declare that variable before this code is run:
var valid = false;
//...other code to check if form is valid
Then move the original JavaScript code into a function that can be run on submit (e.g. function check() {...}). See this demonstrated below. It uses the jQuery function .click() to bind the event handler to the submit button. You will also notice it uses .ready() to wait until the DOM is ready before binding the event handler to the submit button.
//wait until DOM is ready to bind check function to button click
$(document).ready(function(readyEvent) {
$('#submit').click(check);
})
var valid = false;
function check() {
if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
console.log('no error- clearing error html');
$("#MOTFORMERROR").html("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input" /> HEMS
<br />
<input name="" type="checkbox" class="form-check-input" /> EMS
<br />
<input name="" type="checkbox" class="form-check-input" /> Walk-in
<br />
<button id="submit">
Submit
</button>
</form>
<p id="MOTFORMERROR"></p>
</div>
Update:
You typed a comment on your post (replying to questions in other comments):
valid is declared at the beginning of .click
Now that that information is revealed, it makes me feel like most of what I said above is useless. Moving the declaration of valid into the click handler seems like a trivial change and there isn't much different besides that... See the example below:
//wait until DOM is ready to bind check function to button click
$(document).ready(function(readyEvent) {
$('#submit').click(check);
})
function check() {
var valid = false;
if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
console.log('no error- clearing error html');
$("#MOTFORMERROR").html("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input" /> HEMS
<br />
<input name="" type="checkbox" class="form-check-input" /> EMS
<br />
<input name="" type="checkbox" class="form-check-input" /> Walk-in
<br />
<button id="submit">
Submit
</button>
</form>
<p id="MOTFORMERROR"></p>
</div>
Please have a look at the following snippet. It does that you are looking for. I removed the valid variable, since it isn't apparent, where this parameter is used. Apparently, you can add it and use it as you think.
$(function(){
function checkCheckBoxes(){
if($('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
$("#MOTFORMERROR").html("");
}
}
$(".js-check").on("change", checkCheckBoxes);
checkCheckBoxes();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input js-check"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input js-check"/> EMS<br />
<input name="" type="checkbox" class="form-check-input js-check"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>
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.
im trying to write Html code for a small quiz consist of 10 questions, and its written with radio buttons, i want when the user answer or click on the right answer, the counter will increase by one, if he answer the second question right, the counter will become two, so like that..
also when user click on wrong answer i want to increase another counter to display the correct and right answer at the end..
so far i wrote the following html code just for two questions but it does not work.
<html>
<head>
<title>QUIZ</title>
<script type="text/javascript">
var correct=0;
var wrong=0;
function checkans(){
var ans = document.getElementById("quiz");
if( ans.elements[1].checked)
correct++
else
wrong++
var ans2 = document.getElementById("quiz2");
if( ans2.elements[0].checked)
correct++
else
wrong++
alert("Your correct answers : "+correct+" Your wrong answers : "+wrong)
}
</script>
</head>
<body>
<form id="quiz" onsubmit="checkans()" action="">
<p><font color=red>Q1- <font color=black>He ____ it.</p>
<input type="radio" name="radiobutton" value="one"/>
<label>Don't like</label></br>
<input type="radio" name="radiobutton" value="two"/>
<label>Doesn't like</label></br>
<input type="radio" name="radiobutton" value="three"/>
<label>Don't likes</label></br>`enter code here`
<form id="quiz2" onsubmit="checkans()" action="">
<p><font color=red>Q2- <font color=black>They _____ here very often.</p>
<input type="radio" name="radiobutton1" value="four"/>
<label>don't come</label></br>
<input type="radio" name="radiobutton1" value="five"/>
<label>doesn't comes</label></br>
<input type="radio" name="radiobutton1" value="six"/>
<label>doesn't come</label></br>
<input type="submit" name="submit" value="Grade me"/>
</form>
</body>
</html>
I would set up a function that takes the correct/incorrect value as an argument, then branch accordingly.
function checkAnswer(isCorrect)
{
if(isCorrect)
{ correct++; }
else
{ wrong ++; }
}
I'd do the call on the click of the radio button. Correct would be
checkAnswer(true);
Incorrect would be:
checkAnswer(false);
You'll need to adapt this based on whether or not your user can change their answers, but this should get you started.
Use the code below, used correct answer checkbox element
<html>
<head>
<title>QUIZ</title>
<script type="text/javascript">
var correct=0;
var wrong=0;
function checkans(){
var ans = document.getElementById("quiz1CorrectAnswer");
if( ans.checked)
correct++
else
wrong++
var ans2 = document.getElementById("quiz2CorrectAnswer");
if( ans2.checked)
correct++
else
wrong++
alert("Your correct answers : "+correct+" Your wrong answers : "+wrong)
}
</script>
</head>
<body>
<form id="quiz" onsubmit="checkans()" action="">
<p><font color=red>Q1- <font color=black>He ____ it.</p>
<input type="radio" name="radiobutton" value="one"/>
<label>Don't like</label></br>
<input id="quiz1CorrectAnswer" type="radio" name="radiobutton" value="two"/>
<label>Doesn't like</label></br>
<input type="radio" name="radiobutton" value="three"/>
<label>Don't likes</label></br>`enter code here`
<form id="quiz2" onsubmit="checkans()" action="">
<p><font color=red>Q2- <font color=black>They _____ here very often.</p>
<input id="quiz2CorrectAnswer" type="radio" name="radiobutton1" value="four"/>
<label>don't come</label></br>
<input type="radio" name="radiobutton1" value="five"/>
<label>doesn't comes</label></br>
<input type="radio" name="radiobutton1" value="six"/>
<label>doesn't come</label></br>
<input type="submit" name="submit" value="Grade me"/>
</form>
</body>
</html>
Try with jquery on Element.("input:checked")
http://api.jquery.com/checked-selector/