Getting Uncaught Error: Syntax error, unrecognized expression

Question

I am trying get the value of Contact_LastName from the HTML pasted below but I am getting the following error

Uncaught Error: Syntax error, unrecognized expression: div #u1@g.com

Javascript :

 $('.rdContact').off("click").on("click", function (e) {
                              e.preventDefault();
                              $(this).next("div").toggle();  

                              $('.btn-success').off('click').on('click', function (e) { 
                                 e.preventDefault();
                                 var divId = $(this).closest('div').parent().attr('id');
                                 var lnameval = $("div #"+ divId).closest('#Contact_LastName').val();
                                 alert(lnameval);  
                              });

                          });

HTML :

<input type="radio" class="rdContact" name="ContactGroup" value="u1@g.com" style="">

<div class="row" id="u1g.com" style="display: none;">
        <div class="col-md-6">

            <div class="form-group">
                <div class="col-md-3 control-label">
                    <label>Last Name:</label>
                </div>
                <div class="col-md-3">
                    <input class="form-control pr_input defaultText quiet reqrd" id="Contact_LastName" maxlength="50" name="ContactLastName" type="text" value="">
                </div>
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <div class="col-md-3 control-label">
                    <label>First Name:</label>
                </div>
                <div class="col-md-3">
                    <input class="form-control defaultText quiet reqrd" id="Contact_FirstName" maxlength="50" name="ContactFirstName" type="text" value="">
                </div>
            </div>               
        </div>


        <div class="modal-footer">                 
            <input type="button" value="Add Contact" id="btnSaveContact" class="btn btn-success">
            <input type="button" value="Cancel" id="btnCancelContact" class="btn btn-default">    
        </div>
    </div>

see http://stackoverflow.com/questions/11982184/uncaught-error-syntax-error-unrecognized-expression-div — Tzach, Nov 20 '14 at 23:58

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

This is happening because u1@g.com is not a valid value for an element's ID, so jQuery is unable to parse your selector.

From the HTML4 spec:

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 (".").

The solution is to use a valid value for your ID.

See also

Re: your comment below, you are getting undefined because you are using closest() wrong (please follow that link to find out what closest() actually does).

I'm willing to bet that you have the id Contact_LastName in multiple places in your page, and that is a big problem because ids have to be unique.

I am also very curious why you are selecting the row div and retrieving its ID, just so that you can use that ID to re-select it in the next line.

Instead of your current approach, get rid of your duplicate IDs and use this:

$('.btn-success').off('click').on('click', function (e) { 
    e.preventDefault();
    var row = $(this).closest(".row");
    var lnameval = row.find("input[name='ContactLastName']").val();
    alert(lnameval);  
});

Thank you. now I am not getting the error but the value for lnameval is returned as Undefined. — BumbleBee, Nov 21 '14 at 00:15
You r absolutely right there are multiple "Contact_LastName" in my page. Because this form is dynamically generated I need to first get hold of the parent and then capture the firstname, lastname and so on. Your approach worked great. Thank you. — BumbleBee, Nov 21 '14 at 02:11

score 1 · Answer 2 · answered Nov 21 '14 at 00:01

1

The error is coming from Sizzle, which is used by jQuery to parse the element selector.

Your div has a strange id: u1@g.com. Try using ids without @.

answered Nov 21 '14 at 00:01

Tzach

12,889
11
68
115

Thank you. now I am not getting the error but the value for lnameval is returned as Undefined. – BumbleBee Nov 21 '14 at 00:14

Getting Uncaught Error: Syntax error, unrecognized expression

2 Answers2

Linked

Related