Print PHP message to form through Ajax/Jquery - php

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>