SyntaxError: expected expression, got '.' Jquery

Question

I am trying to change the text of a textbox when a checkbox is checked and i get this error on the console

SyntaxError: expected expression, got '.'

Its probably something very simple, but i cant figure this out

HTML

<input type="checkbox" name="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain" id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain">

<input id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLeadForAccount" type="text" value="Company" size="20" name="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLeadForAccount" maxlength="80">

Javascript

    $(document).ready(function () {

   $('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain').change(function() {
       if ('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain').is(':checked')) {
         $('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLead').val('Website_Domain__c');
       }
       else{
         $('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLead').val('Company');
       }
    });

});

JSFiddle

Once you corrected the typo, you will probably have problems with the colons in the identifiers as those are used for pseudo classes in selectors. See [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). — Guffa, Feb 24 '15 at 11:24

T.J. Crowder · Accepted Answer · 2015-02-24T12:03:22.670

Aside from the missing $( on your if condition, you're using characters (colons) in your id that aren't valid for a simple id selector in CSS (e.g., the #xxx type); details. jQuery may let you get away with it (although I'd be fairly surprised), but it's invalid, and so could change in any dot release.

You can use an attribute selector instead:

$("[id=pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain]")...

...or escape all those colons.

Also, you can use this.checked in the change handler, and the conditional operator rather than if/else:

$(document).ready(function () {
    $('[id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain"]').change(function() {
        $('[id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLead"]').val(
            this.checked ? 'Website_Domain__c' : 'Company'
        );
    });
});

Live copy:

$(document).ready(function () {
    $('[id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain"]').change(function() {
        $('[id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLead"]').val(
            this.checked ? 'Website_Domain__c' : 'Company'
        );
    });
});

<label>
  <input type="checkbox" id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain"> The checkbox
</label>
<br>
The input: <input type="text" id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:icConvMatchFieldInLead">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I dont have control over the way the ids come through so using the attribute is the best bet .. Thanks once again..learning new things :) — Prady, Feb 24 '15 at 11:32
: Syntax error, unrecognized expression: [id=pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain] .I am getting a syntax error while using the .change handler. Any thoughts? — Prady, Feb 24 '15 at 11:42
@Prady: Sorry, turns out we need quotes around the attribute value, because we need a CSS *string*, not *identifier*, since colons are invalid in identifiers -- the whole reason we're using the `id` selector! (Doh!) See update and live version above. — T.J. Crowder, Feb 24 '15 at 12:03

score 1 · Answer 2 · answered Feb 24 '15 at 11:23

You have two issues in your code:

1) You need to escape the special characters while building the selector

2) You are missing jquery selector in if condition.

also you can narrow down the code to use $(this) to use context of currently clicked object

 $('[id="pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain"]').change(function() {
   if( $(this).is(':checked')) {
     $(this).next().val('Website_Domain__c');
   }
   else{
    $(this).next().val('Company');
   }
});

Working Demo

score 0 · Answer 3 · answered Feb 24 '15 at 11:20

if ('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain').is(':checked'))

Is your problem, it should be

if ($('#pgManageCS:frmManageCS:pbSettings:pbsDupeMatch:pbsiDupeMatch:chkwebsiteDomain').is(':checked'))

I recommend you use a linter like JSHint

SyntaxError: expected expression, got '.' Jquery

3 Answers3