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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Validation for radio buttons

    i'm running a validation script to check if my radio buttons are selected, but i can't seem to get it to read the value of the field.

    heres my form

    Code:
    <form name="cases" action="cases_process.php" method="post" onsubmit="return validate(this)">
    
                   
    <input name="uscan" id="uscan" value="n" checked="checked"  type="hidden" />
                        	<input type="radio" name="uscan" id="uscan" value="us" class="radial" tabindex="1" /><label>United States</label>
                            <input type="radio" name="uscan" id="uscan" value="canada" class="radial" tabindex="2" style="margin-left:30px;" /><label>Canada</label>
                            <input type="radio" name="uscan" id="uscan" value="other" class="radial" tabindex="3" style="margin-left:30px;" /><label>Other</label>
                            <div style="float:left;margin:-23px 0 0 370px;" id="cancelcon_uscan"></div>
                        	</div>
                            
    
                            <table class="category">
                        	<tr><td><label>Case Name:</label></td><td><input type="text" name="casename" id="casename" class="field" tabindex="6" /></td>
                            <td><div id="cancelcon_casename"></div></td></tr>
                            </table>
                            </form>
    i have a hidden checked field with a value of n, so there is a value of "n" for "uscan" if no radio is selected. i then run this code on submit:

    Code:
    function validate(form) {
      var uscan = form.uscan.value;
      var casename = form.casename.value;
    
    var reWhiteSpace = new RegExp(/^\s+$/);
    
    
      if(uscan == "n") {
        modinputbad('uscan');
        var a = "1";
        }else {
      modinputgood('uscan');
         var a = "0";
      }
    
     
    
      if(casename == "" || reWhiteSpace.test(casename) == true) {
        modinputbad('casename');
        var b = "1";
        }else {
      modinputgood('casename');
         var b = "0";
      }
    
    function modinputbad(id) {
    	$(id).style.border = '1px solid #b63939';
    	$(id).style.background = '#ffdfdf';
    	$('cancelcon_'+id).innerHTML = '<img style="float:left;" src="static/images/cancel_16.png"/>';
    	
    }
    
    function modinputgood(id) {	
    	$(id).style.border = '1px solid #D9D9D9';
    	$(id).style.background = '#F2F4F3';
    	$('cancelcon_'+id).innerHTML = '';
    
    }
    
    
      var added = a+b+c+d+e+f;
      
      var dowork = added.indexOf('1');
    
      if(dowork == '-1')return true; else return false;
      
    }
    everything works up until the if(uscan == "n") so idk why it cant find what the value of the field is, because ive tested it and it seems to know even know what the value is. anything im doing wrong?
    Last edited by thilss0o; 07-30-2010 at 09:39 PM. Reason: didn't close my form tag

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    There is no such thing as the .value of a *GROUP* of same-named form field objects. No matter whether they are radio buttons or checkboxes or even text fields.

    When you have a group of fields with the same name, they are seen by JavaScript as an *ARRAY* of objects.

    So to get the value of a radio button group, you could use code such as this:
    Code:
    function rbGroupValue( group )
    {
        if ( group.length == null )
        {
            // will get here if the group consists of only one field, after all:
            // so return the value of that one radio button if it is checked, else return null 
            // (if you prefer, return "" instead of null)
            return group.checked ? group.value : null; 
        }
        // if here, we *do* have a group, so...
        for ( var g = 0; g < group.length; ++g )
        {
            if ( group[g].checked ) return group[g].value; // return value of checked button
        }
        return null; // again, return "" if you prefer
    }
    *NOW* your code that does
    Code:
         var uscan = form.uscan.value;
    becomes this:
    Code:
         var uscan = rbGroupValue( form.uscan );
    *** HOWEVER ***

    It ain't gonna work with that <form>!!!!

    You have this hidden form field *also* named uscan:
    Code:
        <input name="uscan" id="uscan" value="n" checked="checked"  type="hidden" />
    And, as I said, *ALL* form fields with the same name are turned into an array of that name. So this hidden field *WILL* be in that form.uscan array!

    And, since it has a checked property, and since it is the first element in the array, you will always get a value of "n" from rbGroupValue(form.uscan) !!

    Why is that hidden form field there with the same name????
    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.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    fou-lu, i apologize for the wrong category, i must have clicked on the first java thing i saw haha

    old pedant, thanks for the great analysis! and the reason i had the hidden field was because i first did a php validation where i set the code to be

    PHP Code:
    if ($uscan == "n"){
      print 
    "required fields not filled in";
      } 
    but i switched it to javascript because i wanted the field to highlight and i already had a script for that.

    so if i dont need the checkbox to know if the radio buttons haven't been selected yet then i can just get rid of it i guess

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    I don't think that would work for PHP, anyway. If one of the radio buttons *IS* checked, then you would be getting *TWO* values for that uscan name, and PHP requires that fields with multiple values be named with [] to convert them to a PHP array.

    I am *NOT* a PHP programmer, but I think that PHP has an easy answer for this, in any case: isSet.

    You should *NOT* depend on JavaScript form validation. Use it for the UI aspects, yes, to make your site more friendly. But what do you do if somebody turns off JavaScript in their browser? Or somebody spoofs your site with a fake copy of your <form>? You should always do thorough server-side validation, no matter what client-side code you use.
    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.

  • #6
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    yea i get what your saying, buts its already going to be in the admin only area, so i think it'll be fine.

    and there probably is a php script out there, but i didnt feel like messing with a new cscript when i had this script.



    but anyway, will i still be able to get my form to validate with this javascript? or any for that matter?

    i tried putting the groupcheck thing and take out the checkbox but it still didnt even check the field.

    should this stay as is:?

    Code:
    if(uscan == "") {
        modinputbad('uscan');
        var a = "1";
        }else {
      modinputgood('uscan');
         var a = "0";
      }

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Or maybe
    Code:
    if(uscan == null) {
        modinputbad('uscan');
        var a = "1";
        }else {
      modinputgood('uscan');
         var a = "0";
      }
    Depending on what you opted to return as "not found" from that function.

    But yes, I would think that would be right.

    Try a tiny bit of debugging.

    Put an
    Code:
        alert(uscan);
    just before that "if" test and see what you get for various situations, buttons clicked on or not.
    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:

    thilss0o (07-31-2010)

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    yep that worked, thanks!

  • #9
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    actually, another question...


    would the same work for a drop down menu?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by thilss0o View Post
    actually, another question...


    would the same work for a drop down menu?
    Why not try it and find out?

  • #11
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    well i obviously did, thats why i posted again.

    i just want to know if the same script can be used, but only slighty modified or something, or would i have to get a new script

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    There are several ways to capture the value of a select list:-


    Code:
    var val1 = document.myform.selectlist1.value;
    
    var val2 = document.forms["myform"].selectlist1.value;
    
    var val3 = document.getElementById("selectlist1").value;

  • #13
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    ok great thanks

    and then should i check to see if its null?

    Code:
    if(casename == "null")

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by thilss0o View Post
    ok great thanks

    and then should i check to see if its null?

    Code:
    if(casename == "null")
    No, the value is the value defined in the select list.

    Code:
    <select name = "myselect" onchange = "getValue()">
    <option value = "0" selected> Select something></option>
    <option value = "1"> Select first choice></option>
    <option value = "2"> Select second choice></option>
    <select>
    
    <script type = "text/javascript">
    function getValue() {
    var val = document.formname.myselect.value;
    alert (val);
    if (val == 0) {
    alert ("You must make a selection");
    return false;
    }
    }
    </script>

  • Users who have thanked Philip M for this post:

    thilss0o (08-01-2010)

  • #15
    New Coder
    Join Date
    Feb 2010
    Posts
    74
    Thanks
    9
    Thanked 0 Times in 0 Posts
    that worked first try, thanks alot!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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