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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Force user to choose radio options before submit

    Hi Everyone,

    I'm trying to write a shopping basket in ASP and I need to force the user to choose one or more "Option" radio button(s) before allowing the form to submit.

    For example:

    <input type="radio" name="option1" value="1">Red
    <input type="radio" name="option1" value="2">Blue
    <input type="radio" name="option1" value="3">Green

    <input type="radio" name="option2" value="1">Small
    <input type="radio" name="option2" value="2">Medium
    <input type="radio" name="option2" value="3">Large

    I want the user to HAVE to choose a colour and size from the above options before the form will submit or else they will get a Javascript popup message asking them to make a choice. (There may also be more/less options so it needs to be dynamic)

    I know ASP inside out but very little knowledge of Javascript so once i have the basics of how to do it I can make the code dynamic. There will be a maximum of 5 "Options" for a product and a maximum of 6 choices for each Option.

    If anyone can help I would be most grateful. I am more than happy to pay a small fee by Paypal or make a donation to your favourite charity by Paypal.

    Thank you in advance.

    Justyn.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Try this ...

    Consider this:
    Code:
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    }
    Evaluated returned valued for '' if nothing checked, otherwise some option value.
    Note, could use option index instead when -1 means nothing checked
    and some positive # indicating the option # has been selected.

    Use which ever suits your needs.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    
    var groups = [
    
      { name: 'option1' , msg: 'Please select a color.\n' } ,
      { name: 'option2' , msg: 'Please select a size.\n' }
    
                  ];
    
    function check_one(f)
    {
       for (var g, group, msg = '', i = 0; i < groups.length; i++)
       {
          group = f.elements[groups[i].name];
          g = group.length;
          do
          {
             if (group[--g].checked) break;
             else if (g == 0) msg += groups[i].msg;
          }
          while (g);
       }
       if (msg != '')
       {
          alert(msg);
          return false;
       }
       return true;
    }
    
    </script>
    </head>
    <body>
    <form action="javascript:alert('submitted')" onsubmit="return check_one(this)">
    <input type="radio" name="option1" value="1">Red
    <input type="radio" name="option1" value="2">Blue
    <input type="radio" name="option1" value="3">Green
    
    <input type="radio" name="option2" value="1">Small
    <input type="radio" name="option2" value="2">Medium
    <input type="radio" name="option2" value="3">Large
    <br /><br />
    <input type="submit" value="done">
    </form>
    </body>
    </html>
    That'll be $300.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you both very much for your replies I went with the code Adios suggest as I could "sort of" understand what was happening.

    Just one question though, I had to replace my own form which was this:

    <form method="post" action="addtobasket.asp">

    With the javascript one and so now when you have checked all the radio buttons I get a Javascript alert that says "submitted" but the form doesn't actually submit. Could you tell me how to get around this please?

    EDIT - never mind - I figured it out, I did this:

    <form method="post" action="addtobasket.asp" onsubmit="return check_one(this)">

    Thanks again for all the help - and I'll make a donation to the Breast Cancer charity (here in the UK) if that's ok.
    Last edited by beavere38; 05-29-2009 at 11:51 AM.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Glad you got your actions straight!

    cheers, thanks for the donation. btw, this:

    var groups = [

    { name: 'option1' , msg: 'Please select a color.\n' } ,
    { name: 'option2' , msg: 'Please select a size.\n' }

    ];


    ... is just an array (square brackets) populated with two objects (curly braces); each object represents a field, or group of same-named fields, along with the appropriate user prompt, laid out as the usual property name : property value pairs, comma-separated. The group name is used to get the group (f[orm].elements[groups[i].name]) and then it's looped looking for a check. No check, prompt added to string. This approach might seem like overkill, but it's easily extensible when you start doing more elaborate validation.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Adios,

    yes I sort of figured that out. My form can have up to 5 groups of options - FYI this is what my code looks like where I dynamically build the string:

    zFour = zFour & "var groups = [" & VbCrLf & VbCrLf


    If Option2 = 1 AND pArray(28,0) = 1 Then
    zFour = zFour & " { name: 'option1' , msg: 'Please provide a choice for " & pArray(27,0) & ".\n' } ," & VbCrLf & VbCrLf
    If Option3 = 1 AND pArray(30,0) = 1 Then
    zFour = zFour & " { name: 'option2' , msg: 'Please provide a choice for " & pArray(29,0) & ".\n' } ," & VbCrLf & VbCrLf
    If Option4 = 1 AND pArray(32,0) = 1 Then
    zFour = zFour & " { name: 'option3' , msg: 'Please provide a choice for " & pArray(31,0) & ".\n' } ," & VbCrLf & VbCrLf
    If Option5 = 1 AND pArray(34,0) = 1 Then
    zFour = zFour & " { name: 'option4' , msg: 'Please provide a choice for " & pArray(33,0) & ".\n' } ," & VbCrLf & VbCrLf
    zFour = zFour & " { name: 'option5' , msg: 'Please provide a choice for " & pArray(35,0) & ".\n' } ," & VbCrLf & VbCrLf
    Else
    zFour = zFour & " { name: 'option4' , msg: 'Please provide a choice for " & pArray(33,0) & ".\n' } ," & VbCrLf & VbCrLf
    End If
    Else
    zFour = zFour & " { name: 'option3' , msg: 'Please provide a choice for " & pArray(31,0) & ".\n' }" & VbCrLf & VbCrLf
    End If
    Else
    zFour = zFour & " { name: 'option2' , msg: 'Please provide a choice for " & pArray(29,0) & ".\n' }" & VbCrLf & VbCrLf
    End If
    Else
    zFour = zFour & " { name: 'option1' , msg: 'Please provide a choice for " & pArray(27,0) & ".\n' }" & VbCrLf & VbCrLf
    End If

    zFour = zFour & " ];" & VbCrLf & VbCrLf


  •  

    Posting Permissions

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