Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    if radio button value is checked, then ask for something too

    Hi guys, as it says on tittle if radio button value is checked, then ask for something too, so below you will see how my page looks like right now, but i want to make it to ask something else after we choose A or B or C or D, i tried in this way (below), but it didn't work, it used to work with select option -s in this way.

    the way i tried eg.

    Code:
    if (form.type.value == "A") 
    {
    
    if (form.A1.value == "")
    { alert("Please enter A1."); form.A1.focus(); return;}
    
    }
    THE SITE SOURCE RIGHT NOW:

    Code:
    <SCRIPT language=JavaScript>
    <!--
    function check(form) {
    
    var radio_choice = false;
    for (counter = 0; counter < form.type.length; counter++)
    { if (form.type[counter].checked)
    radio_choice = true; }
    if (!radio_choice)
    { alert("Please select a letter.")
    return (false); }
    
    form.submit()
    }
    //-->
    </SCRIPT>
    
    <form method="post" action="#work">
    <input type="radio" value="A" name="type">A
    <br>
    <input type="radio" value="B" name="type">B
    <br>
    <input type="radio" value="C" name="type">C
    <br>
    <input type="radio" value="D" name="type">D
    <br>
    <input type="button" onclick=check(this.form)  value="Submit" >
    </form>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ummm...even if your code worked (it won't, but fixing it isn't hard), you don't show any field named A1 in your <form>.

    Also, you don't say: Is the user then required to fill in A1 before the form is submitted? If so, what kind of value(s) do you want to accept in A1?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    With that style of coding you'd use form.type[counter].value to refer to the selected radio button.

    Just to point out a few other issues with your code:

    language="javascript" was replaced by type="text/javascript" many years ago.

    <!-- --> inside the script is there to hide it from Internet Explorer 2 - it isn't necessary provided that all your visitors are using at least IE3.

    The JavaScript ought to be attached immediately before the </body> tag so it doesn't slow the loading of the HTML and so that the HTML is there before the script runs.

    alert() is now suitable only for debugging - you should be updating the error messages directly into the HTML using either innerHTML or proper DOM methods.

    Since 1997 input fields have not been allowed directly inside a form tag. You should have a fieldset or div tag wrapped around the inputs.

    You should wrap the text associated with each radio button inside <label> tags and attach those to the appropriate button so that clicking on the text works as well as clicking the button.

    The onclick JavaScript should be moved out of the HTML and included in the JavaScript code instead.

    You should be using type="submit" instead of type="button" so tat the form works for those with JavaScript disabled.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    One more thing:

    You have action="#work" for you <form>.

    But you have specified method="post". You can't use method=post to send data to another HTML page, or even to the same page (which is what #work would imply).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Old Pedant thank you for your answer, i didn't show the A1 on my page cause i thought you would understand it, it will be required to fill in A1 , it would be any simple input; eg. if he checked the A option (just eg.) // that's not the point, what i want to do is: if A is checked to ask for A1 or more .. on the current style of coding i'm using.


    And about the action="#work" i know it's supposed to be action="mail.php" or something like that.
    But please if you get it, and you're able to help me, do it.

    Hi, felgall thank you for your answer, i honestly respect all the words you said and i know you're right, but please if you can help me too, just do it.

    Thank you once again.
    Last edited by closser; 12-17-2012 at 09:59 PM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Here, try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Form</title>
    <style type="text/css">
    div#oops { color: red; font-weight: bold; }
    div#more { visibility: hidden; }
    </style>    
    </head>
    <body>
    <form id="theForm" method="post" action="#work">
    <div id="oops"></div>
    <div>
        <label><input type="radio" value="A" name="type">A</label>
        <br>
        <label><input type="radio" value="B" name="type">B</label>
        <br>
        <label><input type="radio" value="C" name="type">C</label>
        <br>
        <label><input type="radio" value="D" name="type">D</label>
        <br>
        <div id="more">
            Enter your name: <input name="yourname">
        </div>
        <br>
        <input type="submit" value="Submit" >
    </div>
    </form>
    
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("theForm");
          var goof = document.getElementById("oops");
    
          form.onsubmit = function( )
          {
              goof.innerHTML = "";
              var rbs = form["type"];
              var val = null;
              for ( var r = 0; r < rbs.length; ++r )
              {
                  if ( rbs[r].checked ) val = rbs[r].value;
              }
              if ( val == null )
              {
                  goof.innerHTML = "You must select a letter A, B, C, or D";
                  return false;
              }
              document.getElementById("more").style.visibility = (val == "A") ? "visible" : "hidden";
              if ( val == "A" )
              {
                  if ( form.yourname.value.replace(/\s/g,"").length < 3 )
                  {
                      goof.innerHTML = "Please enter your name";
                      return false;
                  }
              }
              return true;
          } // end of onsubmit
    
      } // end of anonymous master function
    
    )(); // self-invoke the master function
    </script>
    </body>
    </html>
    But you will still need to use some server-side page to process the form, not #work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    closser (12-18-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And, by the by, that code should satisfy all Felgall's complaints *AND* it passes the W3C validator.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by felgall View Post
    Since 1997 input fields have not been allowed directly inside a form tag. You should have a fieldset or div tag wrapped around the inputs.
    Well, not true in HTML5. But still, doesn't hurt to put one or the other in, even with HTML5.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it's not exactly how i wanted, but it's okay it worked for me / thanks alot.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, not true in HTML5. But still, doesn't hurt to put one or the other in, even with HTML5.

    Well, according to the HTML 4.01 specification (specifically section 17.3), this is technically true. However, I don't know of any web browser that would actually give you a problem over it.

    The <fieldset> tag draws a box around the included elements. Ugly IMO. <div> is fine but redundant really.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Philip M View Post
    The <fieldset> tag draws a box around the included elements. Ugly IMO. <div> is fine but redundant really.
    That depends on what CSS you use to style the fieldset or div tags. They can both be styled the same way the only difference is that with a fieldset you can also specify a legend whereas you can't with a div.

    I'd suggest using two such tags at least in the one form so that the error messages can be highlighted differently from the rest of the form.

    Where you have radio buttons as well as other fields it is also useful to wrap each group of radio buttons so that you clearly identify them as a group.

    If you think it looks ugly then that is just because you are not applying the appropriate CSS to it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •