The second part of a 2 part tutorial where I show you how to use JavaScript to find out if a radio button has been checked or not.
Don’t forget to subscribe:
http://www.youtube.com/user/QuentinWatt Social links:
————————————————————-
Add me on twitter:
Tweets by QuentinWatt
facebook group:
https://www.facebook.com/quentin.watt
————————————————————-
Original source
18 responses to “JavaScript beginner tutorial 31 – radio buttons”
Hey Quentin I have modified the code a little bit but that doesn't seem to work. Can you pls help!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Form Validation</title>
<script type="text/javascript">
if((document.getElementById('username').value) && (document.getElementById('password').value)){
return true;}
else if(username=="" || password==""){
alert('Please fill in the required blanks');
return false;
}}
</script>
</head>
<body>
<p id="Welcome"> </p>
<form action="submission.html" method="post" onsubmit="return check_info();">
username:<input type="text" name="Username" id="username"/>
password:<input type="password" name="Password" id="password"/>
<input type="Submit" value="Login"/>
</form>
</body>
</html>
hey thnks bro…
thanks man. do you know where I can find events like .value , .innerHTML, or the one you showed (.checked) ?
Hey Quentin! I've tried to write a code where if you do not check none of the radio buttons the document alerts ("Please select one of the provided options") and does not let the user proceed to the next page. It looks OK to me, but for some reason it does not work properly: no alerts pop up and it always sends the user to the next page. Please help.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>Radio buttons</title>
<script type = "text/javascript">
var yes = document.getElementById("yes").checked;
var no = document.getElementById("no").checked;
function func(){
if(yes == false && no == false){
alert("Please select one of the provided options");
return false;
}else{
return true;
};
}
</script>
</head>
<body>
<form action = "some_page.php" method = "post" onsubmit = "return func()" />
<p>Do you want to renew your membership?</p>
YES<input type = "radio" name = "ch" value = "yes" id = "yes" /><br/>
NO<input type = "radio" name = "ch" value = "no" id = "no" /><br/>
<input type = "submit" value = "SUBMIT">
</form>
</body>
</html>
how to call two functions in onclick="#"
why when I do 'document.write' insted of 'alert' my whole page after submit got only argument of 'document.write' radioboxes and rest disappears. Whats the solution for that so I would have my page and above written to tick a botton if both are false ? Someone can help me ?
Excellent!
Where do you work? or used to work?
Thank you Quentin for your tutorials. It has really helped me understand the material.
Top 10 books to become professional programmer
http://buddyfeeds.blogspot.in/2015/08/top-10-books-you-need-to-become.html?m=1
Thank you very much 🙂 !
GOD bless you.
If you're viewing on your phone you might want to get your reading glasses or something…
You can replace function's body with:
return document.getElementById("auto_renew_yes").checked;
If I want to do your last tutorial and this one at a time, where/How will I put the 'onsubmit' event for two different things? should I create another <form> part or any shortcut, simple ways?
why is return on the onsubmit event handler near the function? wouldn't having the function alone still do the same thing?
for getelementid("x") , is it okay if you wrote it as getelementid( "x" ) ,
Hi Quentin, so does the ".checked" property only apply to radios or could it apply to your last tutorial? where if a user/password input is left blank it returns an alert or statement. thanks again.
Really really good teaching!