Variable as jQuery selector fails without error

Question

A basic form:

<body>
  <form method="post">
    <select name="details[1234567890123][strComplaintGroup]" id="details[1234567890123][strComplaintGroup]">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    <select name="details[1234567890123][strComplaintDetail]" id="details[1234567890123][strComplaintDetail]">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </form>
</body>

and the jQuery:

$(document).ready(function(){
  $('select').on('change', function(){
    var strId = $(this).attr('id');
    if( strId.indexOf('strComplaintGroup') > 0 ){
      var uniq_id = strId.substring(8,21); // details[<13 char uniq_id>][]
      var strDetail = '#details[' + uniq_id + '][strComplaintDetail]';
      console.log( strDetail );
      $(strDetail).hide();
    }
  });
});

I am trying to use the change the ComplaintDetail options when the ComplaintGroup is changed. My variable console.log with proper values but the ComplaintDetail Id seems to fail as a jQuery selector.

I have tried $('#' + strDetail) and placing the # in the string. No Luck.

The only thing I can guess is the [] are causing the failure. Valid names but not valid id/selector? As you can see I had to use $(this) instead of the id at the top of the JS. If so, how can I overcome this? The [] are required as this is a subform.

Apparently guessed correctly. Changed the [] to - for the id's and it works. Maybe this will help someone else, I spent two days trying to figure it out.

Related [Which characters are valid in CSS class names/selectors?](http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — Mehdi Dehghani, Sep 13 '16 at 15:20
Please submit your solution as an answer and accept it as a solution. — Suthan Bala, Sep 13 '16 at 15:21

score 1 · Answer 1 · edited May 23 '17 at 10:29

You used invalid characters as Id.

For HTML 4:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

You can check What are valid values for the id attribute in HTML for more details

Variable as jQuery selector fails without error

1 Answers1