JavaScript AND (&&) operator giving illegal character error, then another error

Question

I'm building up a code block and have run into a problem that makes me curious why ampersands won't encode from the WordPress text editor view. This code works as expected, giving me the alerts I'm looking for when it's embedded directly in the page through the text editor:

// This code works as expected
<script>
jQuery(document).ready(function() {
    if (jQuery('select[name=idx-q-PropertyTypes]:first').val()=='') {alert ('it exists');} else {alert ('cant find it');} 
    jQuery('.dsidx-resp-area-submit input').click(function(e){
        alert ("you clicked it");
        if (jQuery('select[name=idx-q-PropertyTypes]:first').val()=='') {
            alert ('There were no search parameters.');
            e.preventDefault();
        }
    });
});
</script>

The next thing I wanted to do is check for a concurrence of conditions. So I changed the code to this:

// This code gives errors 
<script>
jQuery(document).ready(function() {
    if (jQuery('select[name=idx-q-PropertyTypes]:first').val()=='') {alert ('it exists');} else {alert ('cant find it');} 
    jQuery('.dsidx-resp-area-submit input').click(function(e){
        alert ("you clicked it");
    if (
        jQuery('select[name=idx-q-PropertyTypes]:first').val()=='' &&
        jQuery('select[name=idx-q-Cities]:first').val()=='' &&
        jQuery('input[name=idx-q-PriceMin]:first').val()=='' &&
        jQuery('input[name=idx-q-PriceMax]:first').val()=='' &&
        jQuery('select[name=idx-q-BedsMin]:first').val()=='' &&
        jQuery('select[name=idx-q-BathsMin]:first').val()=='' &&
        jQuery('input[name=idx-q-ImprovedSqFtMin]:first').val()==''
    ) {
        alert ('There were no search parameters.');
            e.preventDefault();
        }
    });
});
</script>

The error I got at first is that I had used an illegal character. When I looked up where in the debugger, it was the double ampersands. They showed up as &. So, next I tried replacing all of them with &, which didn't work. After replacing them like that, I got a new error saying that the conditional statement was missing a closing parenthesis. To fix that, I tried add a parenthesis at the end, enclosing each condition in a set of parentheses, and writing the whole condition on one line, each in turn, none of which worked. I also plugged it into a fiddle as this question suggested but that didn't work either. After replacing them like that, I got a new error saying that the conditional statement was missing a closing parenthesis. To fix that, I tried add a parenthesis at the end, enclosing each condition in a set of parentheses, and writing the whole condition on one line, each in turn, none of which worked.

When I link to the script as an outside file, the ampersands encode correctly and the whole script works. Does anyone know why that would be and if there's any way around this problem if I wanted to embed the script like I originally tried?

That text editor might be encoding the `&` to `&`. Does it have a "raw text" setting? — Cerbrus, May 02 '15 at 16:07
chRyNan, am I not understanding something? Was the way I tried to do that not correct (by just replacing each `&` with `&`)? — PapaHotelPapa, May 02 '15 at 16:14
Cerbrus, that text editor is the standard WordPress install of TinyMCE. I always run it in the cleanest way I know how two, which is to select the "text" tab rather than the "visual" tab. — PapaHotelPapa, May 02 '15 at 16:16
If the text editor is not letting you include `&` characters in your JavaScript, then it's the wrong tool for the job. — Pointy, May 02 '15 at 16:22
The problem appears to be the editor, just copy the code and paste it in notepad and manually remove `&&` with again typing `&&`. — vinayakj, May 02 '15 at 16:32
What about uploading the javascript file to another service and importing it to Wordpress from there? See https://stackoverflow.com/a/65674751/5802289 — J0ANMM, Jan 11 '21 at 21:29

mplungjan · Answer 1 · 2018-01-17T16:26:30.127

So you need your script inside CDATA but if you do not want to, just do this if you do not want to change the code.

var val=jQuery('select[name=idx-q-PropertyTypes]:first').val() +
    jQuery('select[name=idx-q-Cities]:first').val() +
    jQuery('input[name=idx-q-PriceMin]:first').val() +
    jQuery('input[name=idx-q-PriceMax]:first').val() +
    jQuery('select[name=idx-q-BedsMin]:first').val() +
    jQuery('select[name=idx-q-BathsMin]:first').val() +
    jQuery('input[name=idx-q-ImprovedSqFtMin]:first').val();
if (val=="") ...

Alternative:

var isEmpty = $('[name^=idx-q]:first')
            .filter(
              function() { 
                return $(this).val() != ""; 
              }
            )
            .length==0;

I did try CDATA tags as well and they didn't work. I love this solution you came up with, though. That would definitely work for the use case. — PapaHotelPapa, May 02 '15 at 17:32

JavaScript AND (&&) operator giving illegal character error, then another error

1 Answers1