Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Arrow Select All checkbox

    Is it possible to create a "Select All" check-box in a PHP program without using Javascript?

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    I didn't get what you said.Can you please write the code?

    p.s.: What I mean is that I want to create 5 check-boxes beside 5 files . Then there show be another checkbox below the 5 files called "Select All" ,which on being selected ,selects /checks all the 5 check boxes beside the 5 files respectively. Hope you all get me now.
    Last edited by ippo; 06-16-2012 at 12:46 PM.

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Though I wouldn't advise it, this will toggle five checkboxes using just PHP. I really think you should use javascript. I used a button as the submit, used CSS to destyle it and wrapped it around another checkbox.

    Edited

    PHP Code:
    <?php

    if (isset($_POST['checkAll'])) {
        if (empty(
    $_POST['items'])) 
            
    $checked true;
    }

    ?>        

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>TEST</title>

    <style type="text/css">
    form span {
        display: inline-block;
        width: 80px;
    }
        
    #submit {
        border: 0;
        background: none;
        padding: 0;
        position: relative;
        right: 3px;
    }    
        
    </style>    
    </head>

    <body>
        <form method="post" action="">
            <div>
                <span>file1.php</span> <input type="checkbox" value="item1" name="items[]" <?php echo isset($checked) ? 'checked="checked"' '' ?>  />
            </div>
            <div>
                <span>file2.php</span> <input type="checkbox" value="item2" name="items[]" <?php echo isset($checked) ? 'checked="checked"' '' ?> /
            </div>
            <div>
                <span>file3.php</span> <input type="checkbox" value="item3" name="items[]" <?php echo isset($checked) ? 'checked="checked"' '' ?> /
            </div>
            <div>
                <span>file4.php</span> <input type="checkbox" value="item4" name="items[]" <?php echo isset($checked) ? 'checked="checked"' '' ?> />
            </div>
            <div>
                <span>file5.php</span> <input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' '' ?> />
            </div>
            <span>Select all</span>
            <button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' '' ?> /></button> 
            
        </form>
    </body>

    </html>
    Last edited by dan-dan; 06-16-2012 at 12:17 PM.

  • Users who have thanked dan-dan for this post:

    ippo (06-16-2012)

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Only tried it in FF actually.

    Quote Originally Posted by iBall View Post
    It works in FF12 but not in my IE9.

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Also works in Chrome, though in Opera it won't even show the submit checkbox. Hmmm.

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I wonder whether styling the submit button to look like a checkbox would fix it in IE and Opera.

    Anyways, it's pub time!

  • #7
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,096
    Thanks
    11
    Thanked 101 Times in 99 Posts
    if you just use a standard button instead of a checkbox the code works fine as is...
    Code:
            <input type="submit" id="submit" name="checkAll" value="<?php echo isset($checked) ? 'check all' : 'uncheck all' ; ?>">
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #8
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Many thanks @Dan-Dan.You are just great!!
    1)The most amazing thing I found in your code is how you changed a submit button to a checkbox!!
    I am still reeling over these lines of codes-
    PHP Code:
    <button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' '' ?> /></button>
    I have not seen yet a submit button tag getting closed by </button>!! Is that a right syntax?
    2)2ndly,how does the submit button getting morphed into a checkbox??
    3)3rdly,what is this code checking??-
    PHP Code:
    <?php echo isset($checked) ? 'checked="checked"' '' ?>
    Also,I dont get why you used the
    PHP Code:
    empty($_POST['items'
    in the 4th line?
    Can you just give a short explanation what this
    PHP Code:
    if (empty($_POST['items'])) 
            
    $checked true
    code does?
    4)Also,you have given the names of all the input check-boxes as items[],then how and what are the names being stored in there?Are they assigned arbitrary names like file1.php,file2.php etc?? How are the names getting assigned automatically without being hard coded?Can you just give an example of what the items array possibly contains?
    Actually so far I was used to giving names to input boxes manually ,but here you used a items[] array & I have never used this type of array assignment myself.
    Please...if you are kind enough to give some explanations the above confusions,will be greatly obliged.


    p.s.: I am still a noob after so many days trying to learn PHP MySQL. I am in the middle of the ocean who has forgotten swimming . Am so confused OMG please excuse me.
    Last edited by ippo; 06-16-2012 at 01:22 PM. Reason: confusion

  • #9
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    1) It's not really valid. You aren't supposed an input nested inside a button element

    2) It becomes "morphed" because the checkbox is in the submit button.

    3) That code says "if the variable $checked is an actual variable, print check="checked", otherwise print nothing.
    Syntax for shorthand-ifs:
    Code:
    return (condition) ? statementTrue : statementFalse;
    If condition then statementTrue, otherwise statementFalse.

    4) All of the checkboxes are given the name of "items[]". What this does is, when the page is submitted and php processes it, creates an array of all the checkboxes automatically. That line of code (the "empty($_POST['....") simply checks to see if the array of sent items is empty (I.E., if none of the checkboxes were checked).

    5) The input names of items[] is processed by php like this:
    Code:
    <input type="checkbox" name="items[]"> // $_POST['items'][0]
    <input type="checkbox" name="items[]"> // $_POST['items'][1]
    <input type="checkbox" name="items[]"> // $_POST['items'][2]

  • Users who have thanked Nile for this post:

    ippo (06-16-2012)

  • #10
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    But when I click on the "Select All" check box ,how are all the check boxes getting checked/selected?
    Can you please explain the flow of program logic pleasee?
    I cant understand ,when $checked is true then what happens sequentially?
    I cant understand at all that, if $checked is true, how do the check boxes get checked??
    What I am doing is first I am checking the "select all" checkbox MANUALLY then what happens?
    @Nile,Your explanation was not very clear . You said
    Code:
    checked=checked
    is printing it !! where is it printing??
    I know already
    Code:
    return (condition) ? statementTrue : statementFalse;
    but that is not my doubt.My doubt is how do all boxes get checked when I check the "Select all ' check box?
    Hope you got me this time!
    Last edited by ippo; 06-16-2012 at 02:06 PM.

  • #11
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    When you click on the "Select All" input, it appears to the user as if (s)he's only clicking on the checkbox, but in actuality, the user is clicking on both the checkbox and the submit button due to the fact that events apply to every child element of the applied element. When this happens, the form is submitted (by the invisible submit button) by a button with a name of checkAll. When the page reloads, it checks to see if the $_POST['checkAll'] postdata is sent, which it is. Afterwards, it checks to see if any of the checkboxes are checked. If none of them are, the script sets a variable called $checked and gives it a boolean value of true. Scrolling down in the code, using that short-if I showed you in my previous code, if $checked is true, it places checked="checked" in the html causing the result you see.

    (if that doesnt make sense, try reading the following: )
    So, responding to your edited post:

    When $checked is true (the highlighted), it displays the second highlighted, which is the html to make a checkbox appear and valued as checked:
    Code:
    <input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
    And it repeats this for every checkbox that needs to be checked when $checked is true.

    But remember: This only happens when there is postdata. If you want to see this in action to understand it better using getdata, change the following highlighted to "get" instead of "post":
    Code:
    <form method="post" action="">
    And in the php change the highlighted to _GET (_POST to _GET):
    Code:
    <?php
    
    if (isset($_POST['checkAll'])) {
        if (empty($_POST['items'])) 
            $checked = true;
    }
    
    ?>
    This will allow you to view the page source and understand where the php is setting the checkbox to checked. In fact, once you've changed the code to get, you can just visit the page like this: page.php?checkAll, and you should be able to actually see in the code what I'm talking about.

    The difference between GET and POST data is that get is sent in the URL while post is sent in the headers. For example, the page I'm on right now says "http://www.codingforums.com/showthread.php?t=265185&page=2", and I can easily change the variables in the URL getting me a different page. However, with post, the variables being sent are not visible to the operator because they are in the headers of the page. You can read about http headers here: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields (just a little real life example: if you've ever filled out a form on a website then pressed the BACK button, you may notice some funky message about resending the post data. this is because when you go back using post data, the variables you send are handled behind the scenes where when you press the BACK button, its unclear to the browser if you want to keep those variables or dump them as opposed to get where the variables are in the url and the browser doesnt need to worry about them as much)
    Last edited by Nile; 06-16-2012 at 02:22 PM.

  • #12
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Firstly,
    I am trying "http://localhost/foldername/Image Upload/select all_chkbox.php?checkAll" as the URL,but nothing happens!!
    2)You said
    It becomes "morphed" because the checkbox is in the submit button.
    but merely wrapping the checkbox in the submit button doesn't morph it as the following code I tried didnt do the trick!!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title> New Document </title>
    <STYLE>
    form span {
        display: inline-block;
        width: 80px;
    }
    
    #submit {
        border: 0;
        background: none;
        padding: 0;
        position: relative;
        right: 3px;
    }    
    </STYLE>
    </head>
    
    <body>
    <form method=post action="">
    <SPAN>SELECT ALL</SPAN> <input type="submit" id="submit" name="all"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?>/></button>
    </form>
    </body>
    </html>
    It needs more spice to change the submit button to a checkbox!! lol

  • #13
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    I'm not sure what the morphed effect you're referring to is. I ran the code and simply got a checkbox that was inside an invisible button. In fact, in Safari, this doesn't even work. Clicking on a checkbox inside a button won't submit the the form, it'll just check the box.

    Your code should in whole look like this:
    Code:
    <?php
    
    if (isset($_GET['checkAll'])) {
    	if (empty($_GET['items'])) 
    		$checked = true;
    }
    
    ?>        
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<title>TEST</title>
    
    <style type="text/css">
    form span {
    	display: inline-block;
    	width: 80px;
    }
    
    #submit {
    	border: 0;
    	background: none;
    	padding: 0;
    	position: relative;
    	right: 3px;
    }    
    
    </style>    
    </head>
    
    <body>
    	<form method="get" action="">
    		<div>
    			<span>file1.php</span> <input type="checkbox" value="item1" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?>  />
    		</div>
    		<div>
    			<span>file2.php</span> <input type="checkbox" value="item2" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
    		</div>
    		<div>
    			<span>file3.php</span> <input type="checkbox" value="item3" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /
    		</div>
    		<div>
    			<span>file4.php</span> <input type="checkbox" value="item4" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
    		</div>
    		<div>
    			<span>file5.php</span> <input type="checkbox" value="item5" name="items[]" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> />
    		</div>
    		<span>Select all</span>
    		<button type="submit" id="submit" name="checkAll"><input type="checkbox" <?php echo isset($checked) ? 'checked="checked"' : '' ; ?> /></button> 
    
    	</form>
    </body>
    
    </html>
    And you should be able to go to ?checkAll and have all of the checkboxes check.
    Last edited by Nile; 06-16-2012 at 02:48 PM.

  • #14
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    But is there any tag called <button> tag? So long I forgot to notice but I used a
    Code:
    <input type="submit">
    instead of
    Code:
    <input type="button">
    .
    But is there any tag called <button>?? I never learnt this in my HTML class!!

  • #15
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Yes - the <button> element isn't really used that often but enables html to render inside of it.

    Writing out:
    Code:
    <input type="button">
    is equivalent to
    Code:
    <button></button>
    Although it's better practice to just use the <input type="...">. Placing HTML inside the <button> tag and expect it to submit when pressing the html inside doesn't work in Safari, so I would highly suggest Javascript for this whole procedure.

  • Users who have thanked Nile for this post:

    ippo (06-16-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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