Results 1 to 5 of 5

Thread: Javascript for check boxes

  1. #1
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Javascript for check boxes

    Hi

    I am looking for a script that will perform the following:

    In my web form I have three questions, each with a yes and a no checkbox. When the users answers *all three* questions with no, he is supposed to get an alert (like an onClick alert).

    Any help would be much appreciated!

    Thanks much
    Yoda

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript">
    function callMe()
    {
    	var len = document.form1.r.length;
    	var i;
    	var one,two,three;
    	
    	
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r[i].checked)
    			one = document.form1[i].value;
    	}
    
    	len = document.form1.r1.length;
    		
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r1[i].checked)
    			two = " "+document.form1[i].value;
    	}			
    	
    			len = document.form1.r2.length;
    		
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r2[i].checked)
    			three = " "+document.form1[i].value;
    	}			
    	
    	if(one ==0 && two == 0 && three ==0)
    		alert('You Pressed all No');
    	
    }
    </script>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
      <input name="r" type="radio" value="1">Yes
        <input name="r" type="radio" value="0">No
        <br>
       <input name="r1" type="radio" value="1">Yes
        <input name="r1" type="radio" value="0">No
            <br>
         <input name="r2" type="radio" value="1">Yes
        <input name="r2" type="radio" value="0">No
            <br>
    	  <input type="button" onClick="callMe()" value="Go">
    </form>
    </body>
    </html>
    Hope this is what you were talking about

  3. #3
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes and no. I don't want the GO button - the alert should come up automatically when the users clicks the third "no" check box.
    Any ideas?

    Yoda

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Thumbs up

    I've changed the HTML a bit, now it will trigger an alert box on two conditions:

    1. User has to select first two NO button (based on your first post)
    2. When they click on the third NO radio button it will trigger that alert box

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript">
    function callMe()
    {
    	var len = document.form1.r.length;
    	var i;
    	var one,two,three;
    	
    	
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r[i].checked)
    			one = document.form1[i].value;
    	}
    
    	len = document.form1.r1.length;
    		
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r1[i].checked)
    			two = " "+document.form1[i].value;
    	}			
    	
    			len = document.form1.r2.length;
    		
    	for(i=0;i<len;i++)
    	{
    		if(document.form1.r2[i].checked)
    			three = " "+document.form1[i].value;
    	}			
    	
    	if(one ==0 && two == 0 && three ==0)
    		alert('You Pressed all No');
    	
    }
    </script>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
    <input name="r" type="radio" value="1">Yes
    <input name="r" type="radio" value="0">No
    <br>
    <input name="r1" type="radio" value="1">Yes
    <input name="r1" type="radio" value="0">No
    <br>
    <input name="r2" type="radio" value="1">Yes
    <input name="r2" type="radio" value="0" onClick="callMe()">No
    </form>
    </body>
    </html>
    In a situation where the user is clicking the third button first and then click first and second, they need to click the third radio NO button once more for triggering the alert box.

    This can be solved using a small change in the HTML code like the following

    HTML Code:
    <form name="form1" method="post" action="">
    <input name="r" type="radio" value="1">Yes
    <input name="r" type="radio" value="0" onClick="callMe()">No
    <br>
    <input name="r1" type="radio" value="1">Yes
    <input name="r1" type="radio" value="0" onClick="callMe()">No
    <br>
    <input name="r2" type="radio" value="1">Yes
    <input name="r2" type="radio" value="0" onClick="callMe()">No
    </form>
    If you use the above mentioned code then it will trigger an alert box if all the 3 NO buttons are selected, the order is not important in this,

    The user can select third, then first and then second it will give alert the only constraint is all must be NO

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    There are many problems with this code.
    Code:
    <script language="javascript">
    language is deprecated for type.
    Code:
    if(document.form1.r[i].checked)
    Forms may not be accessible as properties of document. You should use the document.forms collection.
    Code:
    <input name="r" type="radio" value="0" onClick="callMe()">No
    There are more ways to select a radio button than a click (onchange should work, but unfortunately doesn't in [wait for it...] IE).

    Code:
    <script type="text/javascript">
    function callback() {
      alert("Your message here");
    }
    
    function getRadioValue(el) {
      if(!el.length) return null;
      for(var i = 0; i < el.length; ++i)
        if(el[i].checked) return el[i].value;
      return null;
    }
    
    window.onload = function() {
      for(var i = 0, f = document.forms['form1'].elements; i < f.length; ++i)
        f[i].onclick = f[i].onchange = f[i].onkeypress = function() {
          var f = this.form.elements;
          if(getRadioValue(f.r) === "0" && getRadioValue(f.r1) === "0" && getRadioValue(f.r2) === "0")
            callback();
        };
    };
    </script>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •