jquery - How do I escape an ampersand in a javascript string so that the page will validate strict?

Question

I am trying to pass a dataString to to an ajax call using JQuery. In the call, I construct the get parameters and then send them to the php page on the receiving end. The trouble is that the data string has ampersands in them and the HTML strict validator is chocking on it.

Here is the code:

$(document).ready(function(){
    $("input#email").focus();
    $('#login_submit').submit(function(){
        var username = $('input#email').val();
        var password = $('input#password').val();
        var remember = $('input#remember').attr("checked");
        var dataString = "email="+username+"&password="+password+"&remember="+remember;
        $.post('login.php', dataString, function(data) {
            if (data == 'Login Succeeded.') {
                location.reload(true);
            } else {
                $("input#email").focus();
                $("#login_msg").html(data).effect("pulsate", {times: 2}, 1000); 
            }
        });         
        return false;
    });
});

and here is an example of the validator message: cannot generate system identifier for general entity "password".

var dataString = "email="+username+"&password="+password+"&remember="+rememb…

(in the validator the "p" after the first ampersand is marked red indicating the point of the failure).

Answer 1

Try putting your javascript inside a CDATA block like this:

<script type="text/javascript">
<![CDATA[
// content of your Javascript goes here
]]>
</script> 

which should make it pass validation. To be extra safe you can add Javascript comments around the CDATA tags to hide them from older browsers who don't understand the CDATA tag:

<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>