Getting PHP arrays to work in jQuery

[giza]

Making form variables into arrays in PHP easy. One only needs to add "[]" to the name of the variable to make this happen. Example:

<input type="text" name="search[name]" id="search[name]" />
<input type="text" name="search[age]" id="search[age]" />
<input type="text" name="search[city]" id="search[city]" />
<input type="text" name="search[state]" id="search[state]" />
<input type="text" name="search[country]" id="search[country]" />

When the form is submitted and the PHP code on the processing page is run, there will be a handy little array called $search. This variable can then be passed into additional functions, looped through, etc. It's way easier than working with 5 separate variables.

Lately, I've been using jQuery in some of my web development. It lets me "do more with less", as they say. One very easy way to access specific HTML entities in a document is with pound-notation. Examples:

$("#foo").addClass("required");
$("#bar").hide();
$("#username").css("background-color", "blue");

If you just groaned, then you know what's coming. Sure enough, jQuery has issues with using square brackets in pound-notation. It seems that square brackets are used by jQuery itself as attribute selectors.

It took me some time, but I finally found a workaround, which was the real reason behind writing this journal entry -- so as to save myself and other folks time from having to find this solution again in the future. Examples:

$("[id='search[name]']").hide();
$("[id='search[address]']").show();
$("[id='search[country]']").css("color", "green");

That's about it. Happy jQuerying!

Comments

[pyesetz]

I use form-variable arrays for checkboxes:

<input type=checkbox name="choice[]" value="apple"> Apple
<input type=checkbox name="choice[]" value="pear"> Pear
<input type=checkbox name="choice[]" value="banana"> Banana

So simple!  So clear!  Too bad it's not a real-world example.

<input type=checkbox name="choice[]" value="apple" id="choice_apple"
    <? if (isset($choice['apple'])) echo "checked" ?>
>&nbsp;<label for="choice_apple">Apple</label>

So messy!  So repetitive!

<?
  foreach (array('apple','pear','banana') as $x) {
    echo "<input type=checkbox name='choice[]' value='$x' id='choice_$x'
    if (isset($choice[$x])) echo " checked"; ?>
    echo ">&nbsp;<label for='choice_$x'>".ucwords($x)."</label><br/>\n";
  }
?>

So complicated!

[taral.livejournal.com]

There's nothing requiring that id be the same as name. Just replace [] with _, and voila! Working.

[giza.livejournal.com]

Sure, but that makes things slightly more complicated.

I've found in practice that it's much simpler to keep them the same. That way, I'm typing the same string in PHP and Javascript. (Except when I type "$search[..." in Javascript, which happens all too often already :-P )