PHP-Javascript method for auto-selecting checkbox groups

Discussion in 'Javascript' started by Phil Powell, Apr 13, 2004.

  1. Phil Powell

    Phil Powell Guest

    I am producing a form using PHP on the back end and Javascript on the
    front end. The resulting script will come to the browser as follows:

    Code:
    <script>
    <!--
    function selectAll() {
    moveElement = eval("document.imageForm.move" + "[]");
    alert(moveElement);
    if (document.imageForm.select_all[0].checked) {
    for (i = 0; i < document.imageForm.move.length; i++) {
    document.imageForm.move[i].checked = true;
    }
    }
    }
    
    function deSelectAll() {
    if (!document.imageForm.select_all[0].checked ||
    document.imageForm.deselect_all[0].checked) {
    for (i = 0; i < document.imageForm.move.length; i++) {
    document.imageForm.move[i].checked = false;
    }
    }
    }
    //-->
    </script>
    
    This will work with a checkbox group that has to have this naming
    convention for PHP:

    Code:
    <input type=checkbox name=move[] value="myImage.gif"> - Move?
    
    I will also have a checkbox that will "select all" and "de-select
    all":

    Code:
    <input type=checkbox name=select_all value=1 onChange="selectAll()"> -
    Select All&nbsp;&nbsp;
    <input type=checkbox name=deselect_all value=1
    onChange="deSelectAll()"> - De-select All
    
    I am not familiar at how Javascript can work with non-standard naming
    conventions for event actions, can someone tell me what I'm doing
    wrong? This fails at least in Mozilla 1.6

    Thanx
    Phil
     
    Phil Powell, Apr 13, 2004
    #1
    1. Advertising

  2. Phil Powell

    Matt Kruse Guest

    "Phil Powell" <> wrote:
    > This will work with a checkbox group that has to have this naming
    > convention for PHP:
    > I will also have a checkbox that will "select all" and "de-select
    > all":


    Checkboxes don't have onChange() events, they have onclick() events.

    If you want to ease your pain a bit, you could consider using my "Checkbox
    Group" library, which would handle all this for you quite easily:
    http://www.mattkruse.com/javascript/checkboxgroup/

    --
    Matt Kruse
    Javascript Toolbox: http://www.mattkruse.com/javascript/
     
    Matt Kruse, Apr 13, 2004
    #2
    1. Advertising

  3. I'm sorry but please provide a very simple tutorial on this, you went so
    far over my head that you were on Jupiter and I'm underground.

    Phil

    ---------------------------------------
    TCL and PHP: The Superior Web Languages!
    Javascript: Is Cool
    ASP: why?
    http://valsignalandet.com

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    The Nordic One, Apr 13, 2004
    #3
  4. Phil Powell wrote:

    > I am producing a form using PHP on the back end and Javascript on the
    > front end. The resulting script will come to the browser as follows:
    >
    >
    Code:
    > <script>
    > <!--
    >   function selectAll() {
    >    moveElement = eval("document.imageForm.move" + "[]");
    >    alert(moveElement);
    >    if (document.imageForm.select_all[0].checked) {
    >     for (i = 0; i < document.imageForm.move.length; i++) {
    >      document.imageForm.move[i].checked = true;
    >     }
    >   }
    >  }
    >
    >  function deSelectAll() {
    >   if (!document.imageForm.select_all[0].checked ||
    > document.imageForm.deselect_all[0].checked) {
    >    for (i = 0; i < document.imageForm.move.length; i++) {
    >     document.imageForm.move[i].checked = false;
    >    }
    >   }
    >  }
    > //-->
    > </script>
    > 
    >
    > This will work with a checkbox group that has to have this naming
    > convention for PHP:
    >
    >
    Code:
    > <input type=checkbox name=move[] value="myImage.gif"> - Move?
    > 
    >
    > I will also have a checkbox that will "select all" and "de-select
    > all":
    >
    >
    Code:
    > <input type=checkbox name=select_all value=1 onChange="selectAll()"> -
    > Select All&nbsp;&nbsp;
    > <input type=checkbox name=deselect_all value=1
    > onChange="deSelectAll()"> - De-select All
    > 
    >
    > I am not familiar at how Javascript can work with non-standard naming
    > conventions for event actions, can someone tell me what I'm doing
    > wrong? This fails at least in Mozilla 1.6
    >
    > Thanx
    > Phil



    Your problem is reasonably common (search google groups for select box
    and php and I'm sure you'll find a few recent posts (one or two from me)
    related to this.

    However... there are two methods that you can use to refer to an object
    in a form in javascript - I'm a newbie (six months) but think I'm
    getting pretty strong... someone though might have some other
    method/solution... however, use something like

    boxLength=document.forms["formGroups"].elements["userSelected[]"].length;

    where by 'formGroups' is the name of your form and 'userSelect[]' is the
    name of your select box.

    Using my above example, boxLength would equal the total number of
    selections in a multi-select box.

    Also... put quotes around your INPUT TAG name field... thus

    Use
    > <input type=checkbox name="move[]" value="myImage.gif">

    not
    > <input type=checkbox name=move[] value="myImage.gif">


    as the [] might cause some grief on some web browsers...

    Lastly - I just learned that a mis-use of eval is common - there are
    other methods that you can use that use less resources and faster (for
    example, from a numeric point of view you could use something like
    parseInt() - Do a search on google groups for a recent message I got
    which explains the reasons - search for "why is eval evil" in
    comp.lang.javascript for a detailed explanation.

    Hope something above gives you some help...

    Regards
    Randell D.
     
    Reply Via Newsgroup, Apr 14, 2004
    #4
  5. JRS: In article <Gg1fc.110637$oR5.109407@pd7tw3no>, seen in
    news:comp.lang.javascript, Reply Via Newsgroup <reply-to-
    > posted at Wed, 14 Apr 2004 02:23:34 :

    > - I'm a newbie (six months)


    >Lastly - I just learned that a mis-use of eval is common - there are
    >other methods that you can use that use less resources and faster (for
    >example, from a numeric point of view you could use something like
    >parseInt() - Do a search on google groups for a recent message I got
    >which explains the reasons - search for "why is eval evil" in
    >comp.lang.javascript for a detailed explanation.


    For that, the OP should be referred to the c.l.j newsgroup FAQ. It's
    generally better to cite a specific reference rather than to call for a
    search.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Apr 14, 2004
    #5
  6. Phil Powell

    Phil Powell Guest

    Following occurred when my colleague tested on his machine using IE
    6.0 SP 4 for Win2000 (I am using Linux/Mozilla):

    Ok, back to the drawing board, it didn't work when my colleague tested
    on his machine using IE 6.0 SP4 for Win2K:

    I tried with the HTML code below, but IE spat out the following:

    Line: 42
    Char: 1
    Error: 'document.imageForm.move[]' is null or not an object
    Code: 0
    URL: file://C:\Documents and Settings\eduardo\Desktop\test.html

    HTML code:

    <html>
    <head>
    <title></title>
    <body>
    <script>
    <!--
    ~ function selectAll(checkState, selectStatus, obj) {
    ~ if (document.imageForm.select_all.checked ||
    document.imageForm.deselect_all.checked) {
    ~ for (i = 0; i < obj.length; i++) {
    ~ obj.checked = checkState;
    ~ }
    ~ if (selectStatus.toLowerCase() == 'select')
    document.imageForm.deselect_all.checked = false;
    ~ if (selectStatus.toLowerCase() == 'deselect')
    document.imageForm.select_all.checked = false;
    ~ }
    }
    //-->
    </script>

    <table>
    <tr>
    ~ <td bgcolor=ffffff><a
    href="./images/mu-spin/kyrka.jpg">kyrka.jpg</a></td>
    ~ <td bgcolor=ffffff>Show Metadata</td>
    ~ <td bgcolor=ffffff><input type=checkbox name="move[]"
    value="kyrka.jpg"> - Move?</td>

    </tr>
    <tr>
    ~ <td bgcolor=ffffcc><a
    href="./images/mu-spin/banner.jpg.jpeg">banner.jpg.jpeg</a></td>
    ~ <td bgcolor=ffffcc><a
    href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=147>Show
    Metadata</a></td>
    ~ <td bgcolor=ffffcc><input type=checkbox name="move[]"
    value="banner.jpg.jpeg"> - Move?</td>
    </tr>
    <tr>

    ~ <td bgcolor=ffffff><a
    href="./images/mu-spin/kyrka_gray.jpg">kyrka_gray.jpg</a></td>
    ~ <td bgcolor=ffffff><a
    href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=145>Show
    Metadata</a></td>
    ~ <td bgcolor=ffffff><input type=checkbox name="move[]"
    value="kyrka_gray.jpg"> - Move?</td>
    </tr>
    <tr>
    ~ <td colspan=3 bgcolor=ddddee>
    ~ <input type=checkbox name="select_all" value=1
    onClick="selectAll(true, 'select', document.imageForm['move[]'])"> -
    Select All&nbsp;&nbsp;<input type=checkbox name="deselect_all" value=1
    onClick="selectAll(false, 'deselect', document.imageForm['move[]'])">
    -
    De-Select All</td>

    </tr>
    </table>
    </body>
    </html>

    Phil

    "Matt Kruse" <> wrote in message news:<>...
    > "Phil Powell" <> wrote:
    > > This will work with a checkbox group that has to have this naming
    > > convention for PHP:
    > > I will also have a checkbox that will "select all" and "de-select
    > > all":

    >
    > Checkboxes don't have onChange() events, they have onclick() events.
    >
    > If you want to ease your pain a bit, you could consider using my "Checkbox
    > Group" library, which would handle all this for you quite easily:
    > http://www.mattkruse.com/javascript/checkboxgroup/
     
    Phil Powell, Apr 14, 2004
    #6
  7. Phil Powell

    Matt Kruse Guest

    "Phil Powell" <> wrote in message
    news:...
    > Following occurred when my colleague tested on his machine using IE
    > 6.0 SP 4 for Win2000 (I am using Linux/Mozilla):


    Aren't you missing a <form> tag entirely?

    --
    Matt Kruse
    Javascript Toolbox: http://www.mattkruse.com/javascript/
     
    Matt Kruse, Apr 14, 2004
    #7
  8. No I just forgot to include it within the code I pasted here. Here is
    the corrected code that now works in IE, Opera, Konqueror and Mozilla,
    according to tests I did and a colleague did:



    This seems to work across the board! Thanx for the tip on "onClick".
    Now to figure out how to determine if the user selected an item from the
    dropdown to change hasSelectedAlbum. I can't use the "onChange" event
    within the dropdown because the PHP code that generates the dropdown is
    shared across multiple instances.

    Phil


    Phil
    ---------------------------------------
    TCL and PHP: The Superior Web Languages!
    Javascript: Is Cool
    ASP: why?
    http://valsignalandet.com

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    The Nordic One, Apr 14, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Petra Hübner
    Replies:
    0
    Views:
    468
    Petra Hübner
    Feb 16, 2004
  2. anonymous
    Replies:
    1
    Views:
    4,657
    Francisco Padron
    May 8, 2005
  3. Replies:
    3
    Views:
    382
    Peter Hansen
    Jun 10, 2005
  4. linkswanted
    Replies:
    1
    Views:
    990
  5. Rajive Narain
    Replies:
    0
    Views:
    2,067
    Rajive Narain
    Sep 18, 2009
Loading...

Share This Page