Question posted in
You can find the official documentation here.

jquery ajax submit button

I got a register form using bootstrap modal that will call an ajax post function.

however, it does not seems to execute my $.post.
Also, how do i use the return value from my php function into my ajax data? so if my createAccount returns true or some other value, how does my ajax capture it?

<form action="" id="registerForm" method="POST">
   .....
        <div class="d-grid gap-2"> 
            <button class="btn btn-primary" id="btnRegister" type="submit">Register!</button>

</form>

my ajax.

$("#email").keyup(function(){
    var email = $("#email").val()
    {
        $('#emailResult').remove();
        $.post("createaccount.php",{
            checkEmail : email
        }, function(data){
            if(data=="true")
            {
                error=true;
                var str = '<div id="emailResult">';
                str +='<div class="alert alert-danger" role="alert">';
                str +='Email address already exists!';
                str+= '</div></div>';
                $('#result').append(str); 
            }
            else
            {
                error="false";
            }
        });
    }
});

    $("#btnRegister").click(function(){
    var email = $("#email").val();
    var password = $("password").val();
    $.post("createaccount.php",{
        email : email,
        password : password
    },function(data){
        alert(data);
    })
});

my createaccount.php

<?php
include("db.php");
include("functions.php");

if(isset($_POST['checkEmail']))
{
    $email = $_POST['checkEmail'];
    {
        if(checkEmailExists($email))
        {
            echo "true";
        }
    }
}

if(isset($_POST['submit']))
{
    $email = $_POST['email'];
    $password = $_POST['password'];

    if(createAccount($email,$password))
    {
        return true;
    }
    else
    {
        return false;
    }

}
?>

my functions.php

function createAccount($email,$password)
{
    global $conn;
    $hashPassword = password_hash($password,PASSWORD_DEFAULT);
    $sql = "INSERT into USERS (email,password) VALUES ('$email','$hashPassword')";
    if(mysqli_query($conn,$sql))
    {
        return true;
    }
    else
    {
        echo mysqli_error($conn);
        return false;
    }

}
Tags:

2

Answers


  1. 0

    Try adding this

    $("#btnRegister").click(function(e){
   e.preventDefault();
   // Your code...

    Instead of

    $("#btnRegister").click(function(){
   // Your code...

    This code will stop form from submitting on button click.

    Btw for email checking use another true false value to prevent form submitting until mail validation result comes.

    var error=true;
$("#email").keyup(function(){
    var email = $("#email").val()
    {
        $('#emailResult').remove();
        $.post("createaccount.php",{
            checkEmail : email
        }, function(data){
            if(data=="true")
            {
                error=true;
                var str = '<div id="emailResult">';
                str +='<div class="alert alert-danger" role="alert">';
                str +='Email address already exists!';
                str+= '</div></div>';
                $('#result').append(str); 
            }
            else
            {
                error=false;
            }
        });
    }
});

    And later…

    if(!error){
    $.post("createaccount.php",{
        email : email,
        password : password
    },function(data){
        alert(data);
    }) 
}
    Login or Signup to reply.
  2. 0

    In order to get to the correct place in your PHP code you need to have a submit parameter in the POST array

    if(isset($_POST['submit'])) {

    But your AJAX call does not pass that parameter so add it

    $("#btnRegister").click(function(e){
    e.preventDefault();
    
    $.post("createaccount.php",{
                                email :     $("#email").val(),
                                password :  $("password").val(), 
                                submit: 1               // New line
                                },
        function(data){
            alert(data);
    })
});

    You could also use a e.preventDefault(); to stop the browser submitting the form in the normal way as well as doing your AJAX call

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search