Send errors to PHP page in real time with jQuery

Question

I built a form in php that sends the input values to a jQuery page which then sends the information to another php page to insert the values in to the database.

The problem is

When there's an error, let's say the username exists, I need to be able to send a message back from the php page to the original form and have it show in real time. Any ideas on how to do this?

Here's the jQuery that handles the submition from the form to the php page that inserts in to the database.

// Handle account updates
$('#save_account').click(function() { 
    var log_token = $('#log_token').val();  
    var user_name = $('#user_name').val();  
    var user_pass = $('#user_pass').val();  
    $.post("php/includes/update_account.php", {
        log_token: log_token,
        user_name: user_name,
        user_pass: user_pass
    });
});

Here's the PHP that inserts the values in to the database.

$log_token = $_POST['log_token'];
$user_name = $_POST['user_name'];
$user_pass = $_POST['user_pass'];

$db = db_open();
$query = "SELECT user_name FROM users WHERE user_name='$user_name'";
$result = db_query($db, $query);
$result = db_num_rows($result);
if (!$result) {
    $query = "UPDATE users SET user_name='$user_name', user_pass='$user_pass' 
        WHERE user_id='$_SESSION['user']['user_id']'";
    $result = db_query($db, $query);
} else {
    Pass Error to FORM HERE
}
db_close($db);

That's not the question. I just need to create another jQuery code to send errors back in real time. The real time part is the problem I'm having. Getting them to pop up after they were submitted. — , Mar 28 '13 at 20:42
normally it work's like this: you receive data from the frontend (the user types something in and presses submit for example). Than you call the backend with an Ajax request may it be GET or POST. The backend (your php script) will validate the input. If the username already exists, i.e. an error occured, you will send a message back to your frontend. The frontend has a callback function which will check the answer coming from the frontend and add a success/error message. — herrjeh42, Mar 28 '13 at 20:48
have a look at Matthew Crumley's answer in this posting: http://stackoverflow.com/questions/555315/jquery-checking-success-of-ajax-post — herrjeh42, Mar 28 '13 at 20:52

CodePB · Accepted Answer · 2013-03-28T21:01:00.323

0

Take a look at AJAX. It's a way to send data to and from your page without having to refresh. The easiest way to implement this is using jQuery's ajax method

Your code nearly has it:

$('#save_account').click(function() { 
    var log_token = $('#log_token').val();  
    var user_name = $('#user_name').val();  
    var user_pass = $('#user_pass').val();  
    $.post("php/includes/update_account.php", {
        log_token: log_token,
        user_name: user_name,
        user_pass: user_pass
        }, function(data){
            // handle the response from the page here
            if(data != "") {
                alert(data);
            }
        }
    );
});

The anonymous function passed into the post function is a callback function called when the a response is received from the script called. The variable data contains the response from the page.

PHP

$log_token = $_POST['log_token'];
$user_name = $_POST['user_name'];
$user_pass = $_POST['user_pass'];

$db = db_open();
$query = "SELECT user_name FROM users WHERE user_name='$user_name'";
$result = db_query($db, $query);
$result = db_num_rows($result);
if (!$result) {
    $query = "UPDATE users SET user_name='$user_name', user_pass='$user_pass' 
        WHERE user_id='$_SESSION['user']['user_id']'";
    $result = db_query($db, $query);
} else {
    // return there was an error
    echo "There was an error";
}
db_close($db);

You can do more complex things with this. You could pass an array of errors back to the page. Take a look at JSON for how to send messages in a way JavaScript can easily parse

edited Mar 28 '13 at 21:01

answered Mar 28 '13 at 20:42

CodePB

1,736
12
19

The real time part is the problem I'm having. Getting the message to pop up after it sends to the php page. – Mar 28 '13 at 20:44
Ajax allows you to make a call to a page, and then handle the response to the page. The way you would do this is you would send your form data to a page that validates it, and outputs the response of validation. The AJAX call receives this response, and you can handle this on your page, without ever having to reload. You can then popup a message if the response indicates a validation error. – CodePB Mar 28 '13 at 20:51
See, where you echoed "There was an error", that needs to send back to the form page and pop up. – Mar 28 '13 at 21:02
Updated the answer to explain this. Simply, yes, data is the response from your script – CodePB Mar 28 '13 at 21:05
Where you have // handle the response from the page here, what am I supposed to do there? – Mar 28 '13 at 21:10
I'm just saying what I'm doing below. The code itself does handle the response – CodePB Mar 28 '13 at 21:17
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27131/discussion-between-christian-rankin-and-pburgess) – Mar 28 '13 at 21:21

Send errors to PHP page in real time with jQuery

1 Answers1