SitePoint Sponsor

User Tag List

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

    Disabled true fails

    I can't seem to get disabled true to work. Disabled false works great.

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

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried

    Code JavaScript:
    document.getElementById('multiple_action').disabled = "disabled";

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    Have you tried

    Code JavaScript:
    document.getElementById('multiple_action').disabled = "disabled";
    Yeah, I tried that and it still fails.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Well the disabled = true should work provided that there isn't something in the rest of the code to interfere with it so presumably the cause is elsewhere in the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Well the disabled = true should work provided that there isn't something in the rest of the code to interfere with it so presumably the cause is elsewhere in the page.
    That's strange... There isn't any other JS on the page. This is the only function in the entire JS file.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wondering if they is a perception problem maybe the code to set disabled = true is never executed. Maybe selectall is only called once.

    I notice you have

    f
    Code JavaScript:
    unction selectall (pm) {
        var messages= document.getElementById('pm');

    Your function has an argument pm but you use the literal 'pm'.

  7. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It appears that you are not addressing the element correctly.

    if (checked == false) can't do anything because there is no object to work on.

    The correct syntax for a checkable object (obj) is
    if (obj.checked == false).

    On the other hand the checked referred to here may be a flag. It is difficult to help you without the code.

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    I'm wondering if they is a perception problem maybe the code to set disabled = true is never executed. Maybe selectall is only called once.

    I notice you have

    f
    Code JavaScript:
    unction selectall (pm) {
        var messages= document.getElementById('pm');

    Your function has an argument pm but you use the literal 'pm'.
    I think select all is used more than once because it toggles the checkbox it just doesn't toggle my button to disable when the select all is unchecked.

  9. #9
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unemployment View Post
    I think select all is used more than once because it toggles the checkbox it just doesn't toggle my button to disable when the select all is unchecked.
    Here is the code...

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

    Code HTML4Strict:
    <form method="get" id="pm" name="pm" onsubmit="return false;">
    			<table class="messages">
    				<thead>
    				<tr>
    					<th class="box_column">
    						<label><input type="checkbox" onclick="selectall();" name="check_box_selector" /></label>
    					</th>
    					<th class="from_column">From</th>	
    					<th class="subject_column">Subject</th>
    					<th class="time_column">Time Received</th>
    					<th class="actions_column">Actions</th>
    				</tr>
    				</thead>
    				<?php
     
    				$even_odd = true;
     
    				foreach ($messages as $message)
    				{
    					$even_odd = ($even_odd) ? false : true;
     
    					?>
    					<tr>
    						<td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm<?php echo $message['message_id']; ?>" /></label></td>
    						<td class="from_column">
     
    							<?php 
     
    								$displayName = ucwords("${message['firstname']} ${message['lastname']}");
     
    								if (file_exists("assets/img/avatars/users/${message['from']}.png"))
    								{
    									echo "<img src=\"/assets/img/avatars/users/${message['from']}.png\" title=\"${displayName}\" alt=\"${displayName}\" />";
    								}
     
    								echo "<a href=\"../u/${message['from']}\" title=\"Visit ${displayName}'s profile\">${displayName}</a>"; 
     
    							?>
    							</a>
    						</td>
     
    						<td class="subject_column">
    							<a href="pm_box.php?box=<?php echo $_GET['box']; ?>&amp;read=<?php echo $message['message_id']; ?>">
    								<?php 
     
    									if(!empty($message['subject']))	
    									{
    										echo $message['subject'];
    									} 
    									else
    									{
    										echo "(No Subject)";
    									}	
     
    								?>
    							</a>
    						</td>
     
    						<td class="time_column"><?php echo $message['time']; ?></td>
     
    						<td class="actions_column">
     
    							<?php
     
    							// if ($_GET['box'] == 1)
    							// {
    								// echo "
    									// <a href=\"pm_send.php?to=${message['from']}\">
    										// <img src=\"assets/img/icons/reply.png\" alt=\"Reply\" title=\"Reply\" />
    									// </a>
    								// ";
    							// }
     
    							?>
     
    							<a href="pm_box.php?box=<?php echo $_GET['box']; ?>&amp;delete=<?php echo $message['message_id']; ?>"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
    							<div class="arr_down small" id="arr<?php echo $message['message_id']; ?>">
    								
     
    							<ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
    								<li style="display: block;">
    									<?php echo "<a href=\"pm_send.php?to=${message['from']}\" style=\"padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;\">Reply</a>";?>
    								</li>
    								<li style="display: block;">
    									<?php echo "<a href=\"pm_send.php?forward=${message['message_id']}\" style=\"padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;\">Forward</a>";?>
    								</li>
    							</ul>
    							</div>
    						</td>
    					</tr>
    					<?php
    				}
    				?>
    			</table><!--
    			<input type="button" onclick="SetAllCheckBoxes('pm', 'pmcheckbox', true);" value="All">
    			<input type="button" onclick="SetAllCheckBoxes('pm', 'pmcheckbox', false);" value="None">-->
     
    		<div class="form_footer" style="margin: 10px 0;">
    			<div class="pagination">
    				<span class="selected"><a href="pm_box.php?box=1">1</a></span>
    				<span><a href="pm_box.php?box=1">2</a></span>
    				...
    				<span><a href="pm_box.php?box=1">5</a></span>
    			</div>
    			<span id="drop_button" class="drop_button disabled">
    				<label>
    					<input type="submit" id="multiple_action" name="delete" class="invis dark_grey" disabled="disabled" value="Delete">
    				</label>
    				<span class="arr_down"></span>
    			</span>
    		</div>
    		</form>

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have different function names

    onclick="SetAllCheckBoxes('pm', 'pmcheckbox', true);" value="All">

    and

    function selectall (pm)

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    You have different function names

    onclick="SetAllCheckBoxes('pm', 'pmcheckbox', true);" value="All">

    and

    function selectall (pm)
    The SetAllCheckBoxes was commented out. The function is called higher up in the code. Please look again

  12. #12
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry didn't spot that. Could you clarify a few things for me.

    As the code stands the input button should begin in an disabled state since it has an attribute disabled="disabled". Is that the case? Does it appearance suggest it is disabled, that is the style associated with the class is not making it look enabled when it is in fact disabled?

    Presumably you then click the check_box_selector checkbox which turns it's state to disabled=false. If you then click the check_box_selector checkbox again you would expect the state to go to disabled=true but the problem is that is not happening. Is that right?

    Would it be possible to post the html code that the browser gets rather than the php that generates the html?

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put together the following html page from you php code and everything seems to work OK

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function selectall (pm) {
        var messages= document.getElementById('pm');
        var i =0;
        if (checked === false)
            {
                checked = true;
                document.getElementById('multiple_action').disabled = false;
                document.getElementById('drop_button').setAttribute("class", "drop_button");
            }
            else
            {
                checked = false;
                document.getElementById('multiple_action').disabled = true;
            }
        for (i; i < messages.elements.length; i++)
        {
            messages.elements[i].checked = checked;
        }
    }
    checked=false;
    // -->
    </script>
    </head>
    <body>
    <form method="get" id="pm" name="pm" onsubmit="return false;">
                <table class="messages">
                    <thead>
                    <tr>
                        <th class="box_column">
                            <label><input type="checkbox" onclick="selectall();" name="check_box_selector" /></label>
                        </th>
                        <th class="from_column">From</th>
                        <th class="subject_column">Subject</th>
                        <th class="time_column">Time Received</th>
                        <th class="actions_column">Actions</th>
                    </tr>
                    </thead>
                        <tr>
                            <td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm1" /></label></td>
                            <td class="from_column">
    					<a href=\"../u/a" title="Visit 's profile">Display name</a>
                                </a>
                            </td>
     
                            <td class="subject_column"><a href="pm_box.php?box=a&amp;read=1">Subject</a></td>
                            <td class="time_column">09:00</td>
                            <td class="actions_column">
                                <a href="pm_box.php?amp;delete=1"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
                                <div class="arr_down small" id="arr1">
                                    ?
     
                                <ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
                                    <li style="display: block;">
                                        <a href="pm_send.php?to=a" style="padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;">Reply</a>"
                                    </li>
                                    <li style="display: block;">
                                        <a href="pm_send.php?forward=b" style="padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;">Forward</a>"
                                    </li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="box_column"><label><input type="checkbox" name="pmcheckbox" value="pm1" /></label></td>
                            <td class="from_column">
    					<a href=\"../u/a" title="Visit 's profile">Display name</a>
                                </a>
                            </td>
     
                            <td class="subject_column"><a href="pm_box.php?box=a&amp;read=1">Subject</a></td>
                            <td class="time_column">09:00</td>
                            <td class="actions_column">
                                <a href="pm_box.php?amp;delete=1"><img src="assets/img/icons/delete.png" alt="Delete" title="Delete" /></a>
                                <div class="arr_down small" id="arr1">
                                    ?
     
                                <ul style="position:absolute;left:-4px;top:1.2em;border: 1px solid #2e2e2e;padding: 2px 4px;text-align:left;background-color: #f7f7f7;white-space: nowrap; display: block;width: 75px;font-size: 1.2em;display:none;visibility:hidden;">
                                    <li style="display: block;">
                                        <a href="pm_send.php?to=a" style="padding: 1px 2px;border-bottom: 1px solid #9b9b9b;display:block;">Reply</a>"
                                    </li>
                                    <li style="display: block;">
                                        <a href="pm_send.php?forward=b" style="padding: 1px 2px;border-top: 2px solid #cdcdcd;display:block;">Forward</a>"
                                    </li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                </table>
            <div class="form_footer" style="margin: 10px 0;">
                <div class="pagination">
                    <span class="selected"><a href="pm_box.php?box=1">1</a></span>
                    <span><a href="pm_box.php?box=1">2</a></span>
                    ...
                    <span><a href="pm_box.php?box=1">5</a></span>
                </div>
                <span id="drop_button" class="drop_button disabled">
                    <label>
                        <input type="submit" id="multiple_action" name="delete" class="invis dark_grey" disabled="disabled" value="Delete">
                    </label>
                    <span class="arr_down">?</span>
                </span>
            </div>
            </form>
     
    </body>
    </html>


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
  •