Question

I have a jquery/bootstrap form. My php is checking against the database if an email address is already in use.

If the email address is in use, the following is called but to a new window.

echo'<p class="error">An account already exists for this email address. Please use a different email address</p>';

This all works fine but now I want the error message to show up on the Jquery form. I can’t seem to wrap my head around how to do this.

I know I have to use this handler, but I don’t know where to put the error message or how this code knows which error message to read from the php. Additionally, I would like the error message to show up next to the email field of the form

$(document).ready(function() {
    $('#form').submit(function() {
        $.ajax({
            type: 'POST',
            url: "process.php",
            data: dataString,
            success: function() {
            }
        })
        return false;
    });
});

Answer 1

Processing the error message can be performed in the success property. The function can accept a data argument (the response from process.php).

success: function(data){
    //does data contain p.error?
    //get the contents of p.error, display it on the current page

    //for example:
    if( $(data).find("p.error.name").length ){
        //process name error here
        nameError = $(data).find("p.error.name").text();
        console.log(nameError);
    }
    if( $(data).find("p.error.email").length ){
        //process email error here
        emailError = $(data).find("p.error.email").text();
        console.log(emailError);
    }
}

The success function defined above assumes process.php looks something like this:

<div>
<p class="error name">Please enter a name.</p>
<p class="error email">Your email address is invalid.</p>

<!-- some other stuff here -->
</div>