Getting Uncaught Error: Syntax error, unrecognized expression

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 #[email protected]

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="[email protected]" 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>

Answers:

Answer

This is happening because [email protected] 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);  
});
Answer

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

Your div has a strange id: [email protected]. Try using ids without @.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.