在 Ajax 成功函数中没有得到响应

Question

I am new in PHP and WordPress. Here I am using Ajax call to submit the the information of form and in response I want a Thank you message that is in <div> section. In this code I am able to execute the function that is in function.php but not getting the response back. Is there any problem with the function or wordpress insert query? Can you tell me what mistake am I doing? Please help me. Thank you in advance.

<script type="text/javascript">
    $('#reg-form').submit(function () {
        var name = $('#name').val();
        var email = $('#signup-email').val();
        var password = $('#password').val();
        jQuery.ajax({
            url: ajaxurl,
            type: "POST",
            dataType: 'json',
            data: {
                'action': "registration",
                'name': name,
                'email': email,
                'password': password
            },
            success: function (response) {
                alert("hi");
                $("#signup-thanks").show();
                $("#signup").hide();

            }
        });
    });
</script>

<div class="col-sm-5 " style="margin-top: 1em" >
    <div id="signup">
        <form id="reg-form" method="post" >
            <div class="row">
                <div class="col-sm-offset-1 col-sm-10 form-group col-xs-offset-1 col-xs-10" id="form">
                    <input type="text" class="form-control form-text" id="name" name="organization_name" placeholder="name of NGO" required  >
                </div>
            </div>
            <div class="row">
                <div class="col-sm-offset-1 col-sm-10 form-group col-xs-offset-1 col-xs-10" id="form">
                    <input type="email" class="form-control form-text" id="signup-email" name="email" placeholder="email" required  >
                </div>
            </div>
            <div class="row">
                <div class="col-sm-offset-1 col-sm-10 form-group col-xs-offset-1 col-xs-10 " id="form">
                    <input type="password" class="form-control form-text" id="password" name="password" placeholder="password" required=""  />
                </div>
            </div>

            <div class="row">
                <div class="col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10" id="btnn">
                    <button class="btn btn-success button-def form-text btn-font "  id="registration" type="submit" name="go">Sign Up Free</button>
                </div>
            </div>

        </form>
    </div>
    <div class=" row" id="signup-thanks">
        <div class="col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10 signup-thanks-box " style="text-align: center; display: none;">
            <p class=" thanks-font"  style="font-size: 32px;">Thanks for signing up.</p>

            <p class="font-body"> This means we'll work harder so you can start using this product.</p>
        </div>
    </div>

---

function registration()
{
    global $wpdb;
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    try
    {
        $b = $wpdb->query("INSERT INTO `wp_registration`(`reg_ngo_name`, `reg_email_id`, 'reg_password') VALUES ('$name', '$email', '$password')");
        // $wpdb->insert( 'wp_registration', array('reg_ngo_name' => $name, 'reg_email_id' => $email, 'reg_password' => $password) , array( '%s', '%s', '%s') );
        print json_encode($b);
    }
    catch (Exception $e)
    {
        print json_encode("error occured" . $e);
    }
    exit();
}

add_action('wp_ajax_registration', 'registration');
add_action('wp_ajax_nopriv_registration', 'registration');

Answer 1

I have replaced your jquery & functions.php code with my simple code.

I hope this will solve your problem.

jQuery Code

<script type="text/javascript">
$('button#registration').click(function(e) {
    e.preventDefault();
    var name = $('#name').val();
    var email = $('#signup-email').val();
    var password = $('#password').val();
    var data = {
                'action': 'registration',
                'name': name,
                'email': email,
                'password': password
                };
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    jQuery.post(ajaxurl, data, function (response) {
        alert("hi");
        $("#signup-thanks div").show();
        $("#signup").hide();
    });

});

</script>

And this is your functions.php code.

function registration(){  
    global $wpdb;
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    $table_name = $wpdb->prefix . 'registration';
    $sql = "INSERT INTO $table_name (reg_ngo_name,reg_email_id,reg_password) VALUES 
            ('".$name."', '".$email."','".$password."')";
    $wpdb->query($sql);
    exit;
}
add_action('wp_ajax_registration', 'registration');
add_action('wp_ajax_nopriv_registration', 'registration');