Display a message with ajax from php file

Question

Hello stackoverflow I have created a create user form...

It looks like this...

<form action = "createuser.php" method = "post" id = "from2">
    <input type ="text" id = "namn" name="namn"placeholder = "Your name" required><br>
<input type ="email" id = "usernamet" name="username"placeholder = "Email" required><br>
    <input type = "password" id = "passwordet" placeholder = "Password" name = "password" required>
    <div class="g-recaptcha" data-sitekey="6LcS9hkUAAAAAK_u3cxuIsGtqI3eEdFzZ8haULa3"></div>
    <input class = "lgg" type= "submit" value="Create your new account!">

I use the google Recaptca to make it safe...

Then I send the form with ajax ... Looks like this

$('#from2').on('submit',function(){
if($('#namn, #usernamet, #passwordet').val()){
    $.ajax({
            type: "POST", 
            url: "createuser.php", 
            data: $('#from2').serialize(),
            complete: function(data){
                $('#namn, #usernamet, #passwordet').val('');    
                }
    });
    return false;
}
else{
    alert("Insert values!");
}
});

And then the php side looks like this

<?php 
some google recapcha stuff up here

$response = json_decode(curl_exec($curl));

if(!$response->success){
     echo "Your user was NOT created, use another email... or are you a robot?";

}
else{
insert the user in database
}
?>

My question is how can I show the echo when response is false on the same page as my form? So the user knows if his account was created or not?!

You're nearly there. Use `success` and `error` controls in AJAX call. `error` is for the cases where AJAX was somehow unable to receive any response at all from the server. See [this](http://stackoverflow.com/q/9436534/2298301) example — Dhruv Saxena, Apr 25 '17 at 19:29
FYI a recaptcha on its own does not "make it safe" you still need to validate and protect against injection from a no-robot malicious user — happymacarts, Apr 25 '17 at 19:48

score 0 · Accepted Answer · answered Apr 25 '17 at 19:45

0

You can always call a success or an error callback with $.ajax, as mentioned in the comments above.

$.ajax({ 
    url: 'createuser.php',
    type: 'POST',
    data: $('#from2').serialize(),
    //if successful callback:
    success: function(response) {
      alert(response);
      //you can ofcourse append or use any alternative
    },
    //if failed
    error: function(response) {
      alert(reponse)
    }
});

answered Apr 25 '17 at 19:45

Bad Hombre

596
5
18

@FilipGunnarsson Glad to hear that :) – Bad Hombre Apr 25 '17 at 19:54

score 0 · Answer 2 · answered Apr 25 '17 at 19:52

Why don't you send the data directly from the form and then add it to a database with PHP like:

HTML:

<form action = "createuser.php" method = "post" id = "from2">
    <input type ="text" id = "namn" name="namn"placeholder = "Your name" required><br>
    <input type ="email" id = "usernamet" name="username"placeholder = "Email" required><br>
    <input type = "password" id = "passwordet" placeholder = "Password" name = "password" required>
    <div class="g-recaptcha" data-sitekey="6LcS9hkUAAAAAK_u3cxuIsGtqI3eEdFzZ8haULa3"></div>
    <input class = "lgg" type= "submit" name="submit" value="Create your new account!">
</form>

Note: I added name attribute with value "submit" in the <input type="submit">

PHP (createuser.php):

<?php 
...some google recapcha stuff up here...
if (isset($_POST["submit"]))
{
    ...do smth... (e.g echo "success";
}
else
{
    echo "Registration unsuccessful";
}
?>

Display a message with ajax from php file

2 Answers2