SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Checked checkboxes

    function selectone (pm) {
    var messages= document.getElementsByName('pmcheckbox');
    I'm trying to make a function that says if any of the check boxes are checked then enable the button and give it a class. I think my syntax is wrong though.

    function selectone (pm) {
    var messages= document.getElementsByName('pmcheckbox');

    if (messages.checked == checked)
    {
    document.getElementById('multiple_action').disabled = false;
    document.getElementById('drop_button').setAttribute("class", "drop_button");
    }
    else
    {
    checked = false;
    document.getElementById('multiple_action').disabled = true;
    document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
    }
    }

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This script shows you how to test if a box is checked. It also uses the value of the checked box to enable an adjacent button. You should be able to modify this to meet your own needs.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Test if box is checked</title>
    <script type="text/javascript">
    <!--
    // global reference to form
     var ff;    // global
    // short ref to form
    function shortCut() { ff=document.myForm; }
    // ----------
    // test if box checked and enable corresponding button 
     function testChecked()
      { var i; 
        for(i=0;i<ff.pmcheckbox.length;i++)
         {// looks at each checkbox to see if checked 
           if(ff.pmcheckbox[i].checked==true)
             {// if checked, disable corresponding button using checkbox value as ref to button in form 
               ff[ff.pmcheckbox[i].value].disabled=false;
               alert("Box "+ff.pmcheckbox[i].value+" is checked. Button enabled")
             }  
         } 
      }
    // 
    // ------------- 
    //-->
    </script>
    <style type="text/css">
    <!--
    body      { font-family:arial,helvetica,sans-serif; font-size:13px; color:#00F; font-weight:bold; }
    input     { margin-right:20px; }
    #block1   { margin-bottom:20px; }
    #block1 p { margin:5px; }
    #myForm   { margin:50px 0px 0px 50px; width:250px; }
     
    -->
    </style>
    </head>
     
    <body onload="shortCut()">
     
    <form name="myForm" id="myForm">
      <div id="block1">
        <p class="a"><input type="checkbox" name="pmcheckbox" value="B1"><input type="button" value="Button" name="B1" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B2"><input type="button" value="Button" name="B2" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B3"><input type="button" value="Button" name="B3" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B4"><input type="button" value="Button" name="B4" disabled></div>
      <!-- end block1 -->
      <p>
      <input type="button" onclick="testChecked()" value="Click to test if checked" name="aaa"></p>
      <p>Click browser refresh to start again</p>
    </form>
    <!-- end myForm -->
     
    </body>
     
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    This script shows you how to test if a box is checked. It also uses the value of the checked box to enable an adjacent button. You should be able to modify this to meet your own needs.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Test if box is checked</title>
    <script type="text/javascript">
    <!--
    // global reference to form
     var ff;    // global
    // short ref to form
    function shortCut() { ff=document.myForm; }
    // ----------
    // test if box checked and enable corresponding button 
     function testChecked()
      { var i; 
        for(i=0;i<ff.pmcheckbox.length;i++)
         {// looks at each checkbox to see if checked 
           if(ff.pmcheckbox[i].checked==true)
             {// if checked, disable corresponding button using checkbox value as ref to button in form 
               ff[ff.pmcheckbox[i].value].disabled=false;
               alert("Box "+ff.pmcheckbox[i].value+" is checked. Button enabled")
             }  
         } 
      }
    // 
    // ------------- 
    //-->
    </script>
    <style type="text/css">
    <!--
    body      { font-family:arial,helvetica,sans-serif; font-size:13px; color:#00F; font-weight:bold; }
    input     { margin-right:20px; }
    #block1   { margin-bottom:20px; }
    #block1 p { margin:5px; }
    #myForm   { margin:50px 0px 0px 50px; width:250px; }
     
    -->
    </style>
    </head>
     
    <body onload="shortCut()">
     
    <form name="myForm" id="myForm">
      <div id="block1">
        <p class="a"><input type="checkbox" name="pmcheckbox" value="B1"><input type="button" value="Button" name="B1" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B2"><input type="button" value="Button" name="B2" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B3"><input type="button" value="Button" name="B3" disabled></p>
        <p><input type="checkbox" name="pmcheckbox" value="B4"><input type="button" value="Button" name="B4" disabled></div>
      <!-- end block1 -->
      <p>
      <input type="button" onclick="testChecked()" value="Click to test if checked" name="aaa"></p>
      <p>Click browser refresh to start again</p>
    </form>
    <!-- end myForm -->
     
    </body>
     
    </html>
    I tried working in your suggestion... I decided to make my own function with some of your ideas in place. The function fails though. Do you know why?

    Code JavaScript:
    function selectone (pm) {
    	var msg= document.getElementsByName('pm');
    	var i =0;
     
    	for(i; i < msg.length; i++)
    	{
    		if(msg.elements[i].checked === checked)
    		{
    			document.getElementById('multiple_action').disabled = false;
    			document.getElementById('drop_button').setAttribute("class", "drop_button");
    		}
    		else
    		{
    			document.getElementById('multiple_action').disabled = true;
    			document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
    		}
    	}
    }

  4. #4
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unemployment View Post
    if(msg.elements[i].checked === checked)
    This looks like it should be

    if(msg.elements[i].checked == true)

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nope, it still fails.

    I get a firebug error saying that msg is undefined. New code is below I change to code in the for loop to include elements.

    function selectone () {
    var msg = document.getElementsByName('pm');
    var i = 0;

    for(i; i < msg.elements.length; i++)
    {
    if(msg.elements[i].checked == true)
    {
    document.getElementById('multiple_action').disabled = false;
    document.getElementById('drop_button').setAttribute("class", "drop_button");
    }
    else
    {
    document.getElementById('multiple_action').disabled = true;
    document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
    }
    }
    }

  6. #6
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=unemployment;4797043]
    for(i; i < msg.elements.length; i++){ if(msg.elements[i].checked == true)/QUOTE]

    It is the msg.elements that is giving you the problem. msg contains the object references to the elements named "pm". The correct syntax is:

    for(i=0; i< msg.length; i++)
    { if(msg[i].checked == true)

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=AllanP;4797053]
    Quote Originally Posted by unemployment View Post
    for(i; i < msg.elements.length; i++){ if(msg.elements[i].checked == true)/QUOTE]

    It is the msg.elements that is giving you the problem. msg contains the object references to the elements named "pm". The correct syntax is:

    for(i=0; i< msg.length; i++)
    { if(msg[i].checked == true)
    Ok... I made that change but now I am getting a new error from firebug.

    Error: selectone is not defined

    That doesn't make sense to me because in my code I have

    Code PHP:
    <td class="box_column"><label><input type="checkbox" name="pmcheckbox" onclick="selectone();" value="pm<?php echo $message['message_id']; ?>" /></label></td>


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
  •