Jump to content

Ajax message gets skipped to the url page not on required div element


Recommended Posts

**script.js**

$(function(){ $('.form').on('submit', function(e){ e.preventDefault(); $form = $(this); submitForm($form); }); $('.register').on('submit', function(e){ e.preventDefault(); $reg = $('.register'); registerForm($reg); }); }); function submitForm($form){ $footer = $form.parent('.modal-body').next('.modal-footer'); $footer.html('<img src="public/images/ajax-loader.gif">'); $.ajax({ url: $form.attr('action'), method: $form.attr('method'), data: $form.serialize(), success: function(response){ response = $.parseJSON(response); if(response.success){ if(!response.signout){ setTimeout(function(){ $footer.html( response.message ); window.location = response.url; },5000); } $footer.html( response.message ); } else if(response.error){ $footer.html( response.message ); } console.log(response); } }); } function registerForm($form){ $footer = $form.parent('.modal-body').next('.modal-footer'); $footer.html('<img src="public/images/ajax-loader.gif">'); var data = new FormData(this.form); $.ajax({ url: $form.attr('action'), method: $form.attr('method'), data: data, processData: false, contentType: false, success: function(response){ response = $.parseJSON(response); if(response.success){ if(!response.signout){ setTimeout(function(){ $footer.html( response.message ); window.location = response.url; },5000); } $footer.html( response.message ); } else if(response.error){ $footer.html( response.message ); } console.log(response) } }); }

**auth.php**

<?php require_once 'includes/init.php'; $status = $user->login($_POST, $db); if( $status === 'success'){ echo json_encode([ 'success'=> 'success', 'message'=> '<p class="alert alert-success">Authenticated successfully!</p>', 'url' => 'profile.php', ]); } else if( $status === 'missing_fields'){ echo json_encode([ 'error'=> 'error', 'message'=> '<p class="alert alert-danger">All fields mandatory!</p>', ]); } else if( $status === 'error'){ echo json_encode([ 'error'=> 'error', 'message'=> '<p class="alert alert-danger">Incorrect email or password!</p>' ]); }

**signup.php**

<?php require_once 'includes/init.php'; $status = $user->signup($_POST, $db); if( $status === 'success'){ echo json_encode([ 'success'=> 'success', 'message'=> '<p class="alert alert-success">You are signed up successfully!</p>', //'url' => 'index.php', 'signout' => 1, ]); }else if( $status === 'missing_fields'){ echo json_encode([ 'error'=> 'error', 'message'=> '<p class="alert alert-danger">All fields mandatory!</p>', ]); }else if( $status === 'invalid format'){ echo json_encode([ 'error'=> 'error', 'message'=> '<p class="alert alert-danger">Only jpg,jpeg,pngfiles allowed!</p>', ]); }else if( $status === 'error'){ echo json_encode([ 'error'=> 'error', 'message'=> '<p class="alert alert-danger">Failed to sign you up!</p>' ]); }

?>

**user.php**

class User{ public function login($user, $db){ if(empty($user['email']) OR empty($user['password'])){ return 'missing_fields'; } $sql = "SELECT * FROM `users` WHERE `email`=?"; $statement = $db->prepare($sql); if( is_object($statement) ){ $statement->bindParam(1, $user['email'], PDO::PARAM_STR); $statement->execute(); if($row = $statement->fetch(PDO::FETCH_OBJ)){ // you the database and verify if the password and email match or not if(password_verify($user['password'], $row->password)){ $_SESSION['logged_in'] = [ 'id' => $row->id, 'name' => $row->name, ]; return 'success'; } } }

 

I have the below files...which has two form login and register(haven't posted the form part) forms are action to auth.php and signup.php respectively and validate through user.php, everything works perfectly on login. However, when I register the user with name and image the success message get on the URL page, not on the modal-footer div I want to update the message in footer DOM, which is div modal-footer. I am using two different functions in script.js one has a data value of $.form.serialize, which handles the login part and Formdata handles the registration part....please guide to update the success message on the modal-footer div......Thanks.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.