JavaScript - PHP <input...name> conflict

[qajaq]

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:

<input type="checkbox" name="city" ...>

(The ellipses simply indicate further attributes; they're not in the code literally.)

The JavaScript function looks like this:

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

<input type="checkbox" name="city[]"...>

(note the square brackets added) so that my PHP script can be written as follows:

 <?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

document.searchcriteria.city[c].checked=true;

nor

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?

[zombykillah]

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

[qajaq]

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.

[zombykillah]

I've had success with following in the past:

document.getElementsByName(name+'_['+numm+']')[0].checked;

But my structure was a little different from yours.

[qajaq]

I'm not clear what you're representing with

['+numm+']

Would you clarify that, please?

[zombykillah]

In my case I was using big arrays with fix numbers.
For example the name was:

<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:

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

[Manko10]

You can do this:

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:

var rbuttons = document.getElementById('radiobuttons').getElementsByTagName('input');
for (var i = 0; i < rbuttons.length; ++i) {
    rbuttons[i].setAttribute('checked', 'checked');
}

[qajaq]

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:

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.

[Manko10]

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.