SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    radio button form validation

    Hi I'm trying to get some validation working on a set of form elements but my alert keep's on alerting regardless of the radio btn being checked. Can someone tell me what I'm doing wrong please.

    Code:
    <html>
    <title>Radio Button Validation</title>
    <body bgcolor="#FFFFFF">
    
    <script language="JavaScript">
    function checkform()
    {
    if (!document.feedback.field.checked) {
    		alert('There is a problem with...');
    	return false;
    }
    }
    </script>
    
    
    <form onSubmit="checkform()" name="feedback">
    <input type="radio" value="A" name="field">A
    <br>
    <input type="radio" value="B" name="field">B
    <br>
    <input type="radio" value="C" name="field">C
    <br>
    <input type="radio" value="D" name="field">D
    <br>
    <input type="submit" value="Submit">
    </form>
    
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved the first bit to my problem, but I've got another problem as I'm not a strong JS programmer how can I tweak the script so that it checks more than one set of radio buttons as I'm building a questionnaire and will be asking more than one question ie. something like this:

    Code:
    <html>
    <title>Radio Button Validation</title>
    <body bgcolor="#FFFFFF">
    
    <script language="JavaScript">
    function valbutton(thisform) {
    myOption = -1;
    for (i=thisform.myradiobutton.length-1; i > -1; i--) {
    if (thisform.myradiobutton[i].checked) {
    myOption = i;
    }
    }
    if (myOption == -1) {
    alert("You must select a radio button");
    return false;
    }
    
    alert("your cool");
    
    thisform.submit(); 
    }
    </script>
    
    
    <form name="myform">
    <input type="radio" value="1st value" name="myradiobutton" />1st<br />
    <input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
    <input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
    
    <input type="radio" value="1st value" name="myradiobutton2" />a<br />
    <input type="radio" value="2nd value" name="myradiobutton2" />b<br />
    <input type="radio" value="3rd value" name="myradiobutton2" />c<br />&nbsp;<br />
    <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
    </form>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    United Kingdom
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use multiple form names: myform1, myform2 and have the same radio button name that is myradiobutton or you can modify your function so that it passes the radiobutton instead of the form name. Therefore you will have only one form, that is myform and call your function like this: valbutton(myradiobutton1) or valbutton(myradiobutton2).

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this example I made an array of the names of the radio buttons to check and loop through them:
    Code:
    function valbutton(thisform) {
    	var radios = ["myradiobutton1","myradiobutton2","myradiobutton3"];
    	
    	for( var j=0; j < radios.length; j++ ) {
    		myOption = -1;
    		for (i=thisform.elements[radios[j]].length-1; i > -1; i--) {
    			if (thisform.elements[radios[j]].checked) {
    				myOption = i;
    			}
    		}
    		if (myOption == -1) {
    			alert("You must select a radio button for " + radios[j]);
    			return false;
    		}
    		
    	}
    
    	alert("your cool");
    
    	thisform.submit(); 
    }
    Keep in mind that if the person doesnt click the submit button but simply presses enter the form will submit without running the validate function.

    To fix that, call the validate function in the onsubmit event of the form tag and make the function return true or false.


Bookmarks

Posting Permissions

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