jQuery Incorrectly Parses Form Variable Names Containing # Character and [array]

[carlroett@…]

Given the following general structure, embedded inside a web page with a form, etc. Testing in FireFox 7.0.1 with jQuery v1.6.1

===================================================

<table class="form-table targetOne">

<tr> <th valign="top">Location</th> <td>

<label>

<input type="radio" value="page" name='foo#bar[baz]' checked='checked' />Page </label> &nbsp;

<label>

<input type="radio" value="profile" name='foo#bar[baz]' />Profile </label> &nbsp;

<label>

<input type="radio" value="tab" name='foo#bar[baz]' />Tab </label> &nbsp;

</td>

</tr>

</table>

======================================================================

jQuery("input[name=foo#bar[baz]]:checked").val();

...returns "undefined", when it should return the value of the currently selected radio button.

Changing the "name" in the form to match...

jQuery("input[name=foo#bar]:checked").val(); WORKS

jQuery("input[name=foo[baz]]:checked").val(); WORKS

jQuery("input[name=foo@bar[baz]]:checked").val(); WORKS

But the # character combined with a sub-array causes jQuery to fail.

[rwaldron]

Have you tried escaping the special character and putting the mandatory quotes around the attribute value?

[carlroett@…]

Replying to rwaldron:

Have you tried escaping the special character and putting the mandatory quotes around the attribute value?

Please post an example of what you're referring to.

[rwaldron]

 http://api.jquery.com/attribute-equals-selector/

[addyosmani]

Escaping the '#' character solves this:  http://jsfiddle.net/GQeGW/