how to use htmlspecialchars with ajax contact form

The URL has no special characters -- the function is not needed in this case.

Oh, so you are saying I don't need to do it at all?

Or maybe I'm misunderstanding the question.  PHP htmlspecialchars() is used to make information safe for browser display by nullifying the effect of certain characters.  This is important when PHP is creating browser output, but it might not matter when the (human) client is creating input to a form.  Maybe you can show us a little more of the example, so we can see where the data is coming from...?

Here is the html and ajax. Do you need the php as well?

 <form id="contact-form" action="">
		                        <input type="text" name="name" id="name"placeholder="Your Name">
		                        <input type="text" name="email" id="email" placeholder="Email Address">
		                        <textarea name="message" rows="4" id="message" placeholder="Message"></textarea>
		                        <button type="submit" id="contact-submit">Send Message</button>
		                        <div style="display:none;" id="loading"><img src="img/ajax-loader.gif"> &nbsp; Submitting...</div>
		                    </form>

Select allOpen in new window

Ajax:

jQuery(document).ready(function ($) {
    $("#contact-form").submit(function (e) {
        e.preventDefault();
        $('#error').fadeOut("slow");
        $("#contact-submit").hide();
        $("#loading").show();
        var str = $(this).serialize();
        $.ajax({
            type: "POST"
            , url: "process.php"
            , data: str
            , success: function (response) {
                $('#error').html(response);
                if (!response || response.length == 0 || response.indexOf("Your message was sent") >= 0) $("#contact-form").hide();
                $("#contact-submit").show();
                $("#loading").hide();
                $('#error').fadeIn().html(response);
                setTimeout(function () {
                    $('#error').fadeOut("Slow");
                }, 5000);
            }
        });
        return false;
    });
});

Select allOpen in new window

PS. I just used it because the W3 schools website has it in their php form validation tutorial.

Sidebar note: W3 Schools is a pretty good resource!

That is a great explanation, thanks! The only thing I am not 100% sure of is why you say for my form I don't need to do it. Because as you mentioned in your example, couldn't the user just put your sample code into the comments field for example?

<script>Alert('Pwn3d!');</script>

Select allOpen in new window

Yes, that is quite possible, but it's also quite harmless.  The only way that it matters, and the only way it is under your script's control, is on the outbound side.

A great security mantra is "FIEO" meaning filter input, escape output.  Here is the general idea behind "filter" -- if you detect "unusual" characters in client input, it's probably best to just ignore the request because it may be an attack vector.  The "escape" is taken care of by htmlspecialchars() or htmlentities() immediately before echoing the data into the browser output stream.

Thank you!