JavaScript beginner tutorial 31 – radio buttons




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:

facebook group:
https://www.facebook.com/quentin.watt
————————————————————-

Original source


18 responses to “JavaScript beginner tutorial 31 – radio buttons”

  1. 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>

  2. 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>

  3. 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 ?

  4. 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.

Leave a Reply