I'm trying to get an error that says that the email exists already and I'm trying to use jquery. I'm using ajax and it does work, because when I use firebug and I go to the console it says that the email address exists but I would like that to appear on the page.
index.php
<div class="register-newsletter">
<form id="myForm">
<input type="email" name="email" id="email" value="enter email address" required>
<input type="image" value="SUBMIT" id="sub" src="images/register.jpg">
</form>
<a class="newsletter" href="javascript:void(0);">Add to e-mailing list</a>
This is my jquery
$("#email").click(function(){
if($.trim($(this).val() ) == "enter email address"){
$(this).val("");
}
})
$("#email").blur(function(){
if($.trim($(this).val() ) == ""){
$(this).val("enter email address");
}
})
$("#sub").click(function () {
var email = $.trim($("#email").val());
if(email == "" || !isValidEmailAddress(email)){
alert('enter valid email');
return false;
}
var ajaxid = ajax("ajax/userInfo.php","email="+encodeURIComponent(email));
$("#result").html($.trim(ajaxid));
});
$("#myForm").submit(function () {
return false;
});
function clearInput() {
$("#myForm :input").val('');
}
$('p').hide();
$('#myForm').hide();
$(".newsletter").click(function(){
$(".newsletter").hide();
$('#myForm').show();
});
$('#myForm').submit(function(){
$('#myForm').hide();
$('p').show();
});
and this is my userInfo.php
<?php
include("../config.php");
global $_NEWSLETTER_CUSTOMERS_TABLE;
$email = $_POST['email'];
//$email = html_entity_decode(str_replace("'", "\'", $_POST["email"]));
$query = mysql_query("SELECT * FROM $_NEWSLETTER_CUSTOMERS_TABLE WHERE `email` = '".$email."'");
if(mysql_num_rows($query) >0){
echo '<span class="exists">Email address arleady exists</span>';
} else {
if(mysql_query("INSERT INTO $_NEWSLETTER_CUSTOMERS_TABLE(email) VALUES('$email')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";
}
You are attempting to append the data incorrectly. jQuery's ajax()
method takes a function that will be called upon the success of the request, called success
. At the moment, you are trying to append ajaxid
, (which contains ajax()
s return value, not the result of the request) to #result
.
var ajaxid = ajax("ajax/userInfo.php","email="+encodeURIComponent(email));
$("#result").html($.trim(ajaxid));
Should be more like:
var ajaxid = ajax("ajax/userInfo.php", {
data:"email="+encodeURIComponent(email),
success:function(d){
$("#result").html($.trim(d));
}
});
Use jQuery.post() inside your click handler:
$.post('ajax/userInfo.php', { email: email }, function(data) {
alert(data.message);
}, 'json');
And in your PHP file instead of echo
use:
$response = array();
$response['message'] = mysql_query("...") ? 'success' : 'fail';
return json_encode($response);
You must return the value, eg JSON
Your JS
$("#sub").click(function () {
$.ajax({
url : "ajax/userInfo.php",
dataType : "json",
error : function(request, error) {
alert("Erreur : responseText: "+request.responseText);
},
success : function(data) {
alert(data.email_exist);
$("#result").html(data.email_exist);
}
});
});
AND your PHP
if(mysql_num_rows($query) >0){
$result = array(
'email_exist' => 'Email address arleady exists'
);
}
json_encode($result);