Find the answer to your Linux question:
Results 1 to 9 of 9
I'm writing a web application that includes both JavaScript and PHP, and I've run into an apparent conflict between their syntax requirements. I have a list of cities presented in ...
Enjoy an ad free experience by logging in. Not a member yet? Register.
  1. #1
    Just Joined!
    Join Date
    Jul 2007
    Posts
    14

    JavaScript - PHP <input...name> conflict


    I'm writing a web application that includes both JavaScript and PHP, and I've run into an apparent conflict between their syntax requirements.

    I have a list of cities presented in an HTML form, each with a checkbox before its name. The conflict arises because I want to have two things possible: (1) JavaScript to allow a single "All Cities" checkbox to check all the individual city checkboxes, and (2) PHP to be able to identify which checkboxes are checked and further process those choices.

    All the checkboxes associated with the cities have the same name attribute. To make the JavaScript work, each checkbox is coded like this:
    HTML Code:
    <input type="checkbox" name="city" ...>
    (The ellipses simply indicate further attributes; they're not in the code literally.)

    The JavaScript function looks like this:
    Code:
    function ckallcities()
    {
      if (document.getElementById("allcities").checked==true)
      {
        for (c=0; c<document.searchcriteria.city.length; c++)
        {
          document.searchcriteria.city[c].checked=true;
        }
      }
    }
    ("searchcriteria" is the name of the form.)

    This works fine as long as the HTML is coded as above.

    However, the PHP appears to need the name attribute formatted as an array in the HTML code; that is, it needs
    HTML Code:
    <input type="checkbox" name="city[]"...>
    (note the square brackets added) so that my PHP script can be written as follows:
    PHP Code:
    <?php
          $cities 
    $_POST["city"];
          ...(
    more stuff)...
        
    ?>
    This creates the $cities variable as an array that includes all the cities that the user may have checked before hitting the "submit" button.

    When I write the HTML this way, the PHP works perfectly. Unfortunately, it breaks the JavaScript, whether I include the square-brackets with the name-attribute (in the JavaScript) or not. That is, neither
    Code:
    document.searchcriteria.city[c].checked=true;
    nor
    Code:
    document.searchcriteria.city[][c].checked=true;
    will work.

    Has anyone here had experience with using this combination of PHP and JavaScript and found a way to make them both work?

  2. #2
    Linux User
    Join Date
    Dec 2009
    Posts
    262
    Hi,

    I guess it may be enough to tell JavaScript that the [] shall not be interpreted as array but as part of the name.
    Maybe:
    document.searchcriteria.city\[\][c]
    document.searchcriteria.city%5B%5D[c]
    will work

  3. #3
    Just Joined!
    Join Date
    Jul 2007
    Posts
    14
    Quote Originally Posted by zombykillah View Post
    Maybe:
    document.searchcriteria.city\[\][c]
    document.searchcriteria.city%5B%5D[c]
    will work
    Thanks for a thoughtful suggestion, zombykillah -- unfortunately, it doesn't work in this case. I also tried the Octal sequences (%133%135) but they were ineffective as well.

  4. #4
    Linux User
    Join Date
    Dec 2009
    Posts
    262
    I've had success with following in the past:
    Code:
    document.getElementsByName(name+'_['+numm+']')[0].checked;
    But my structure was a little different from yours.

  5. #5
    Just Joined!
    Join Date
    Jul 2007
    Posts
    14
    I'm not clear what you're representing with
    ['+numm+']
    Would you clarify that, please?

  6. #6
    Linux User
    Join Date
    Dec 2009
    Posts
    262
    In my case I was using big arrays with fix numbers.
    For example the name was:
    HTML Code:
    <input type="checkbox" value="getInfo(infoLeuchtMittel,de)|idlm=6" name="sel[idlm6][4][0]">
    name would be: sel[idlm6][4]
    num would be: 0

    In my case I used such big arrays because I used the same indexes for the data fields to create a big table.

    In your case:
    Code:
    function ckallcities()
    {
      if (document.getElementById("allcities").checked==true)
      {
        for (c=0; c<document.searchcriteria.city.length; c++)
        {
          document.getElementsByName('city[]')[c].checked=true;
        }
      }
    }

  7. #7
    Linux User Manko10's Avatar
    Join Date
    Sep 2010
    Posts
    250
    You can do this:
    Code:
    function ckallcities() {
        if (document.getElementById("allcities").checked==true) {
            for (c = 0; c < document.searchcriteria.city.length; ++c) {
                document.forms['searchcriteria'].elements['city[]'][c].checked = true;
            }
        }
    }
    However, I advice you not to rely on names etc. Instead use standard DOM functions in combination with IDs. Provided your form has a DIV element with the ID "radiobuttons" containing only your radio buttons as child node:
    Code:
    var rbuttons = document.getElementById('radiobuttons').getElementsByTagName('input');
    for (var i = 0; i < rbuttons.length; ++i) {
        rbuttons[i].setAttribute('checked', 'checked');
    }
    Last edited by Manko10; 07-10-2011 at 01:25 AM.
    Refining Linux Advent calendar: 24 Outstanding ZSH Gems

  8. #8
    Just Joined!
    Join Date
    Jul 2007
    Posts
    14
    Thanks, both of you!

    I got it to work with a variation on Manko10's second suggestion. Actually, the problem as presented worked with that suggestion as written, but I also wanted to be able to clear all the checkboxes in that list by clearing the "All Cities" checkbox. Using the "setAttribute" property didn't work for that, because once the "checked" attribute is introduced into the <input> element, it's there for keeps and there's no way to turn it off short of re-writing the innerHTML.

    What I found effective was this:
    Code:
    function ckallcities(){
      var citylist = document.getElementById("citylist").getElementsByTagName("input");
      var ischecked = document.getElementById("allcities").checked;
      for (var c=0; c<citylist.length; c++) {
        citylist[c].checked = ischecked;
      }
    }
    "citylist" is the id of the <div> that holds only the cities' <input> elements, and "all cities" is the id of the checkbox next to the "All Cities" option.

  9. #9
    Linux User Manko10's Avatar
    Join Date
    Sep 2010
    Posts
    250
    For this you have the removeAttribute() method. But checked = false is also fine. By the way, the value for checking the checkbox is of course "checked", not true as the attribute is checked="checked" of course. I have edited that.
    You should learn a bit more about DOM methods. I promise you: it's worth the effort.
    Refining Linux Advent calendar: 24 Outstanding ZSH Gems

Posting Permissions

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