SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript radio button validation

    Hey there,

    I need a simple javascript that will disable a submit button in a form until all questions with radio buttons have been answered.

    The user gets a list of questions and needs to give an answer on a scale from 1-5 for all of them. So unless all questions have been answered, the submit button should be disabled.

    I saw some javascript snippets that will work fine for one question, but how can i extend it to check say 15 questions? Here is the one I am looking at at the moment:

    Code JavaScript:
    onclick="javascript:document.form1.submit_evaluation.disabled=false"

    Thanks a lot,

    Fabian

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using Dreamweaver, it has a nifty feature built in for form validation.

    Otherwise, your going to have to code a function to check to see if the radio buttons /or check boxes have been selected.

    For instance, onSubmit=checkmyform();

    In checkmyform() you could use a variety of ways to check the values. Here is one idea, you would have to add the code to get the value of the form element(s), if they are not "selected" you could then do an alert() and return false --- otherwise, the function would return true and continue with the form action.

    var numitems = 16;
    var submitok = false;

    for(i=1; i <= numitems; i++) {
    if(itemisnotchecked) submitok = false; /* pseudocode */
    }

    if(!submitok) alert('You must check all items');

    return submitok;
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi holmescreek,

    thanks for your reply!

    I tried to implement the code you suggested as follows:

    Code JavaScript:
    function validate() {
    var submitok = true; 
    // check if all radio buttons have been selected
    	for (i=1; i<=20; i++)
    	{
    		if (document.getElementById(i) == 0)
    		{
    			submitok = false;
    		}								
    	}
    return submitok;
    }

    So I gave all the radio buttons an id, and am checking their value using getElementById. And if one of them is zero, submitok should be set to false.

    I'm initiating the function using obsubmit = "return validate();" in the form tag.

    Can you see anything wrong with it? It still always submits the form, even when no question has been answered!

    Thanks a bunch,

    Fabian

  4. #4
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I come across a solution last night after pondering the way I have done this before.

    First, in your <input type="submit"...> insert this : onclick()=validate();

    Next, give your form an id like <form id=myform method="post" ...>

    In your validate function use something like this :

    if(submitok) document.myform.submit();

    otherwise return false

    I'm rushing to get out of town on business today, but here is copy paste example that I wrote that checks a file input field to make sure it isn't left blank. Same concept.

    Code:
    <script language="javascript">
    
    // Require User To Specify Full Song Name and Clip Name if this is a new record
    
    function required_fields(){
     
     
     if(!editrecord){
    
       if(document.form1.SNG_MP3FULLNAME.value == '') {
       
          alert('You Must Select The Full Song From The List');
          
          return false; 
       }
       
       if(document.form1.SNG_MP3CLIPNAME.value == '') {
       
          alert('You Must Select The Sample Song From The List');
          
          return false; 
       }
       
      }
    
    
    }
    </script>
    
    <html>
    ...
    <form action="saveall.php" method="post" name="form1" id="form1">
    ...
    <input type="submit" name="SAVE_SONG" id="SAVE_SONG" value="Save Changes" onClick="required_fields();"/>
    ...
    intragenesis, llc professional web & graphic design

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My generic JS form validation script. The <form> tag has the attribute

    Code:
    onsubmit="return formchecker(this);"
    attached to it to invoke the form. This might help in your understanding.
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry for late response, was out of town as well! thank so much for your help, I'll try if I can get it to work this way!

    Fabain


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
  •