Real time Email Checking in Database using PHP Codeigniter, Ajax and Jquery - php

I am trying to implement a realtime email duplication check in an application using PHP Codigniter, Ajax and Jquery. But I am not getting any successful results.
Jquery
<script type="text/javascript">
$(document).ready(function()
{
$("#email").keyup(function()
{
if($("#email").val().length >= 4)
{
$.ajax(
{
type: "POST",
url: "<?php echo site_url('stthomas/check_user');?>",
data: "email="+$("#email").val(),
success: function(msg)
{
if(msg=="true")
{
$("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/yes.png')" });
}
else
{
$("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" });
}
}
});
}
else
{
$("#usr_verify").css({ "background-image": "none" });
}
});
});
</script>
My Form is as Follows
<div class="form-group formgp">
<label class="col-md-4" for="Inputemail">Email :</label>
<div class="col-md-8" >
<input type="text" name="email" class="form-control" id="email" value="<?php echo set_value('email'); ?>" placeholder="Email"> <span id="usr_verify" class="verify"></span>
</div>
</div>
Controller:
public function check_user()
{
$usr=$this->input->post('email');
$result=$this->stthomas_model->check_user_exist($usr);
if($result)
{
echo "false";
}
else{
echo "true";
}
}
Model:
public function check_user_exist($usr)
{
$this->db->where("email",$usr);
$query=$this->db->get("email");
if($query->num_rows()>0)
{
return true;
}
else
{
return false;
}
}

It is not easy to guess what the problem is, but you better check the jquery ajax error detail. you have just set the success part of process in your code:
success: function(msg){
See what error you have if the ajax gets an error:
success: function(msg){
// success code
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}

Related

Ajax html input value appears empty

I am trying to submit a form via ajax post to php but the value of the input tag appears to empty.
I have cross-checked defined class and id and it seems ok. I don't where my mistake is coming from. Here is the code
index.html
<div class="modal">
<div class="first">
<p>Get notified when we go <br><span class="live">LIVE!</span></p>
<input type="text" class="input" id="phone" placeholder="Enter your email adress" />
<div class="arrow">
<div class="error" style="color:red"></div>
<div class="validator"></div>
</div>
<div class="send">
<span>Subscribe</span>
</div>
</div>
<div class="second">
<span>Thank you for<br />subscribing!</span>
</div>
</div>
<script src='jquery-3.3.1.min.js'></script>
<script src="script.js"></script>
script.js
$(document).ready(function(){
function validatePhone(phone) {
var re = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
return re.test(phone);
}
$('.input').on('keyup',function(){
var formInput = $('.input').val();
if(validatePhone(formInput)){
$('.validator').removeClass('hide');
$('.validator').addClass('valid');
$('.send').addClass('valid');
}
else{
$('.validator').removeClass('valid');
$('.validator').addClass('hide');
$('.send').removeClass('valid');
}
});
var phone = $('#phone').val();
var data =
'phone='+phone;
$('.send').click(function(){
$.ajax({
type:"POST",
url:"subscribe.php",
data: data,
success: function(data){
alert(data);
if (data ==1) {
$('.modal').addClass('sent');
}else{
$('.error').html("Error String:" +data);
}
}
})
});
});
subscribe.php
```php
$phone = htmlentities($_POST['phone']);
if (!empty($phone)) {
echo 1;
}else{
echo "Phone number cannot be empty";
}
```
An empty results with the error code is all I get. Can any one help me out here with the mistakes I am making. Thanks
Change next
JS:
$('.send').click(function(){
$.ajax({
type:"POST",
url:"subscribe.php",
data: data,
success: function(data){
alert(data);
if (data ==1) {
$('.modal').addClass('sent');
}else{
$('.error').html("Error String:" +data);
}
}
})
});
to
$('.send').click(function(){
var data = $('#phone').val();
$.ajax({
type:"POST",
url:"subscribe.php",
data: {phone: data},
success: function(data){
alert(data);
if (data ==1) {
$('.modal').addClass('sent');
}else{
$('.error').html("Error String:" +data);
}
}
});
});
If you send a POST request via ajax you need to format data as a JSON object, see my code below.
Replace this:
var data =
'phone='+phone;
with this:
var data = {phone: phone};

Codeigniter form validation in ajax

How can i go back to the view page and modal with the validation errors if the validation runs false ..
I want to show validation errors in the modal ..
Im new to jquery ajax ..
Is there needed to add in my jquery .. or what way can i do it..
Controller
public function update(){
$this->form_validation->set_rules('lname', 'Family Name', 'required');
if ($this->form_validation->run() == FALSE) {
}
else {
$this->home_model->update();
redirect(base_url());
}
}
Jquery
$(document).on('click', '#update', function() {
console.log($(this).attr('data-registerid'));
$.ajax({
url: "<?php echo base_url('home/get_data')?>",
type: "POST",
dataType: "JSON",
data: {
"id": $(this).attr('data-registerid')
},
success: function(data) {
console.log(data);
$('#no').val(data.rec['no']);
$('#lname_edit').val(data.rec['lname']);
$('#fname_edit').val(data.rec['fname']);
$('#mi_edit').val(data.rec['mi']);
$('#bdate_edit').val(data.rec['bdate']);
$('#module_edit').val(data.rec['module']);
$('.updatemodal').modal({
backdrop: 'static',
keyboard: false
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});
});
To pass form validation status to client, use the below code in your controller. The code responds with a json-formatted, error, and notice text.
if ($this->form_validation->run() == FALSE) {
$json_response['form_errors'] = $this->form_validation->error_array();
exit(json_encode($json_response));
}
Client side, in your jquery ajax success handler, you can use the below code so the status response emitted server side is displayed to the client.
if (data.form_errors != undefined) {
var errors = '';
$.each(data.form_errors, function(i, val) {
errors = errors + "\n" + val;
});
if (errors != "") alert(errors);
}
else {
alert('no error(s) in form... submit form..');
}
Alternative to the above js code:
For updating each form elements' status when they change, use the below code. Place it outside your form submit handler.
function update_form_validation() {
$("input,select,textarea").on("change paste keyup", function() {
if ($(this).is(':checkbox') == true) {
$(this).siblings("label:last").next(".text-danger").remove();
} else if ($(this).is(':radio') == true) {
$(this).siblings('input[type="radio"][name="' + $(this).attr('name') + '"]:last').next(".text-danger").remove();
$(this).next(".text-danger").remove();
} else {
$(this).next(".text-danger").remove();
}
});
}
update_form_validation();
For displaying general notice and displaying each errors and notices right after their respective form element,
use the below code. In your form submit handler, place the code inside your ajax success function.
if (data.form_errors != undefined) {
$.each(data.form_errors, function(i, val) {
if ($('input[name="' + i + '"]').is(':hidden') == false) {
if ($('input[name="' + i + '"]').is(':radio') == true) {
$('input[name="' + i + '"]:last').after('<div class="text-danger">' + val + '</div>');
} else if ($('input[name="' + i + '"]').is(':checkbox') == true) {
$('input[name="' + i + '"]').siblings("label:last").after('<div class="text-danger">' + val + '</div>');
} else {
$('input[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
$('select[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
$('textarea[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
}
}
});
} else {
alert('no errors in form... submit form..');
}
You can use CodeIgniter form validations function :
$errors = array();
if ($this->form_validation->run() == FALSE) {
$errors['validation_error'] = validation_errors();
echo json_encode($errors);
exit();
}
Now in jquery:
$(document).on('click', '#update', function() {
console.log($(this).attr('data-registerid'));
$.ajax({
url: "<?php echo base_url('home/get_data')?>",
type: "POST",
dataType: "JSON",
data: {
"id": $(this).attr('data-registerid')
},
success: function(data) {
var myObj = JSON.parse(data);
$('#error_div').html(myObj.validation_error);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});
});
View
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Login Form</h5>
</div>
<div class="modal-body">
<div id="modelError"></div>
<form method="post" action="javascript:void(0)">
<div class="input-group">
<input type="text" name="name" id="name" placeholder="First Name">
</div>
<div class="input-group">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
</div>
<input type="submit" id="my_form" name="Save">
</form>
</div>
</div>
</div>
</div>
Script
<script>
$('#my_form').click(function(){
$.ajax({
url: "<?php echo base_url('controller/function')?>",
type: "POST",
data: {
'name': $('#name').val(),
'last_name': $('#last_name').val(),
},
success: function(data) {
var myObj = JSON.parse(data);
var msg = '<div class="alert alert-danger alert-dismissable">'+myObj.error+'</div>';
$('#modelError').html(msg);
},
error: function() {
alert('Error get data from ajax');
}
});
});
</script>
Controller
public function insert()
{
if(isset($this->input->post())){
$this->form_validation->set_rules('name','Name','required');
$this->form_validation->set_rules('last_name','Last Name','required');
if ($this->form_validation->run() == FALSE)
{
$this->msg['error'] = validation_errors();
echo json_encode($this->msg);
}else{
$this->your_model->insert($this->input->post());
redirect(base_url());
}
}else{
$this->load->view('view-page');
}
}

How to display value of jquery in php

I want to get the value of jquery in php form in popup.
my jquery is
$(document).ready(function(){
$("#submit").click(function() {
var mobileNumber = $("#mobileNumber").val();
if(mobileNumber=="")
{
alert("Please Enter Mobile Number");
}
else
{
$.ajax({
type: "POST",
url: "<?php echo base_url('test'); ?>",
data: {mobileNumber: mobileNumber},
success: function(result){
if(result){
$("#enter-otp").modal('show');
}
}
});
}
return false;
});
});
I want to print var mobileNumber value in enter-otp id popup in same page
so i write
<?php echo $mobileNumber; ?>
but it is not showing
If you want to enter value in enter-otp id popup in same page. You dont want any PHP script you can do it by jquery only. (Although You can write in success of ajax). Suppose you have div tag with id of otp-div inside enter-otp. You can write following code
success: function(result){
if(result){
$("#enter-otp").modal('show');
$("#otp-div").html(mobileNumber);
//OR ifotp-div inout attribute then use `val()`
$("#otp-div").val(mobileNumber);
}
}
depending on what gives you back your "result"-variable, you can output data.
so if your "result"-variable gives you back something useful, you can take this data and put it in the html like this.
success: function(result){
if(result){
$("#enter-otp").html(result).modal('show');
}
}
regarding to your edit, this would be a simple solution:
success: function(result){
if(result){
$("#enter-otp").html(mobileNumber).modal('show');
}
}
i picked up your code and run it on localhost. and after few changes, i got it working. to try following:
test.php
<form action="" method="post">
<input id="mobileNumber" type="text" name="mobileNumber" value="" placeholder="">
<input id="submit" type="submit" name="" value="submit">
</form>
<div id="enter-otp" style="display: none; border: 1px solid red;"></div>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var mobileNumber = $("#mobileNumber").val();
if (mobileNumber == "") {
alert("Please Enter Mobile Number");
} else {
$.ajax({
type: "POST",
url: "result.php",
data: { 'mobileNumber': mobileNumber },
success: function(result) {
if(result){
$("#enter-otp").show();
$("#enter-otp").html(result);
} else {
alert("no data received");
}
}
});
}
return false;
});
});
</script>
result.php
<?php
if( isset($_REQUEST['mobileNumber'] )){
echo $mobileNumber = $_REQUEST['mobileNumber'];
} else {
echo "no data";
}
?>

Integration for php with ajax

I have a record of carriers and clients. When selecting a carrier on the customer screen, I need it to be automatically filled out the carrier's e-mail and telephone. The PHP file is returning a JSON correctly, but it is dropping in the error of jquery and not in success. I checked in Firefox's Firebug and the HTML tab of the console, where the GET requisition is reset.
<?php
include "Config/config_sistema.php";
$res = mysql_query("SELECT * FROM transportadoras");
$menu_items = null;
while($ln = mysql_fetch_object($res)){
$menu_items[] = $ln;
}
json_encode($menu_items);
?>
<script>
$("body").on("change","#transportadoras",function(event){
event.preventDefault();
var trigger=$(this);
$.ajax ({
type: "POST",
url: "buscaDadosTransportadora.php",
dataType: 'json',
success: function (data) {
$("#telefone_transp").val(data.telefone);
$("#email_transp").val(data.email);
},
error: function (data) {
alert("Erro");
},
});
});
</script>
return in ajax
[{"ID":"5","Nome":"Vinicius","email":"viniciusbalbinot91#gmail.com","telefone":"32680018"},{"ID":"6","Nome":"teste","email":"teste#teste.com.br","telefone":"12345567"}]
You response is array .
[{"ID":"5","Nome":"Vinicius","email":"viniciusbalbinot91#gmail.com","telefone":"32680018"},....]
you should loop through data.
success: function (data) {
$.each(data,function(user){ /* code ...*/});
}
If you want some current row select one row from mysql .
hope it can help u
php.php
$inp=$_POST["data"];
$txt[0]=array("ID"=>"5","Nome"=>"Vinicius","email"=>"viniciusbalbinot91#gmail.com","telefone"=>"32680018");
$txt[1]=array("ID"=>"6","Nome"=>"teste","email"=>"teste#teste.com.br","telefone"=>"12345567");
for($c=0;$c<sizeof($txt);$c++)
{
if($txt[$c]["ID"]==$inp)
{echo json_encode($txt[$c]);}
}
index.php
ID:<input id="txt" name="txt" type="text" />
<br><br>
Name:<input id="name" name="txt0" type="text" disabled="disabled"/><br>
Email:<input id="email" name="txt0" type="text" disabled="disabled"/><br>
Tel:<input id="tel" name="txt0" type="text" disabled="disabled"/><br>
js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("document").ready(function()
{
$("#txt").keyup(function ()
{
$.ajax(
{
type:"POST",
dataType:"json",
url:"php.php",
data:{data : $("#txt").val()},
success: function(data)
{
$("#name").val(data.Nome);
$("#email").val(data.email);
$("#tel").val(data.telefone);
},
error: function ()
{
alert("Error!");
}
});
});
});
</script>

Cancel submit jquery

This is a part of the code from a form requesting data to check if the email alredy exist. The thing is, the program is supposed to return 0 if there is no any mail like this. It dont work properly, because the program keep sending the data, even if the mail is not correct.
If you want more info, or i am missing something let me know. Thanks in advance.
$(document).ready(function () {
$("#enviar").click(function(e) {
e.preventDefault();
var error = false;
consulta = $("#email2").val();
$.ajax({
type: "POST",
url: "compruebaEmail.php",
data: "b="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){
if(data==0){
$("#error").html("Email incorrecto");
error = false;
}else{
$("form").unbind('submit').submit();
}
}
});
if (error){
return false;
}
});
});
And here is my compruebaEmail.php
<?php require_once('connections/vinoteca.php'); ?>
<?php
mysql_select_db($database_vinoteca, $vinoteca);
$user = $_POST['b'];
if(!empty($user)) {
comprobar($user);
}
function comprobar($b) {
$sql = mysql_query("SELECT * FROM usuarios WHERE email = '".$b."'");
$contar = mysql_num_rows($sql);
if($contar == 0){
echo 0;
}else{
echo 1;
}
}
?>
And here goes the POST
<form method="POST" name="form1" action="validarUsu.php">
<div class="row">
<span class="center">Email</span>
</div>
<div class="row">
<input type="text" name="email" id="email2" value="" size="32" />
</div>
<div class="row">
<span class="center">Contraseña</span>
</div>
<div class="row">
<input type="password" name="password" id="id2" value="" size="32" />
</div>
<div class="row">
<span id="error"> </span>
</div>
<div class="row">
<input type="submit" value="Acceder" id="enviar" size="20">
</div>
<div class="row">
Recuperar contraseña
</div>
</form>
The problem is you're returning false from your Ajax function. You need to return false from your click function. Give this a try:
$("#enviar").click(function() {
var error = false;
consulta = $("#email2").val();
$.ajax({
type: "POST",
url: "compruebaEmail.php",
data: "b="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){
if(data==0){
$("#error").html("Email incorrecto");
error = true;
}
}
});
if (error)
return false;
});
If all you want is canceling the submitting event, then :
Either :
1 - Add the event arg to your click handler :
$("#enviar").click(function(event){
2 - use event.preventDefault(); when you want to cancel the submit message :)
or change the "return false;" location so that it will be triggered in the "click" handler scope and note the "success" scope e.g with a boolean that would represent if there is an error (EDIT : that is Styphon' solution)
Documentation here : http://api.jquery.com/event.preventdefault/

Categories