Question 410154 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Ajax Request Not updating HTML WordPress

Been working on trying to figure out this bug for the last 2 hrs, and can’t figure it out.
The code works… I can send to wordpress, and see the response in the console, however it will not update check-email. Any advice will be greatly appreciated. I’ve been trial and erorring, and can’t get any progress.

HTML

    <div class = "form-group container-fluid">
  <label for="Registrant" class="inlineEditor">Email</label>
  <div class="row ">
      <div class="col" >
        <input type="email" required class="form-control checking_email" name="Email" id="Email"  placeholder= "[email protected]"oninput="checkemail()" style="background-color:rgb(248, 250, 251);"/>
                    <small id="FirstName" class="text-muted">

    </small>
          <div class="invalid-feedback"> Please provide a valid email address.
          </div>
        <span id="check-email"></span>
      </div>
 </div> 
 </div>

Ajax Script

<script>
    // setTimeout(function(){ callAjax(); }, 3000);
function checkemail() {

    jQuery.ajax({
    url: "/wp-admin/admin-ajax.php",
        data: {
        'action': 'emailval',
        'Email':document.getElementById('Email')
    },
    type: "POST",
dataType: 'json',
    success:function(response){
      setTimeout(function(){
      jQuery("#check-email").html(response);
      },3000);
    },
    error:function (){}
    });
}
</script>

Function.php File

add_action( 'wp_ajax_emailval', 'emailval' );
add_action('wp_ajax_nopriv_emailval', 'emailval');

function emailval()
{

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        global $wpdb; // Use the global $wpdb object
        {
            error_reporting(E_ALL); 
            $email = $_POST['Email'];
            //wp_send_json_success($email);
            $emailclean = explode('@', $email);
            $domain = array_pop($emailclean);
            $bad_domains = array('google.ca, hotmail.com); 

            #$link = mysqli_connect("localhost", "root", "","site");
            $sql = $wpdb->prepare("Select count(*) from " .$wpdb->prefix ."EmailValidation where email ='$email'");
            //wp_send_json_success($sql);
            $results = $wpdb->get_var($sql);
            if($results>0)
                {

                    echo("<span style='color:red'> It appears you are already a member, please contact us at for futher assistance. </span>");
                    echo "<script>$('#submit').prop('disabled',true);</script>";

                }
            elseif (in_array($domain, $bad_domains) ) {
                echo json_encode( "<span style='color:red'> Please register with your personal email </span>");
                echo "<script>$('#submit').prop('disabled',true);</script>";
                echo'1';
                exit();
            }


            else
            {
                echo('Thank You for becoming a member');
                echo "<script>$('#submit').prop('disabled',false);</script>";
            }

        }

    }
Tags:

2

Answers


  1. 0

    It has some problems,
    in jquery code you should use : ‘Email’: document.getElementById(‘Email’).value ,
    and in your ajax code you should have not use ‘echo’, it’s better to use
    wp_send_json_success() or wp_send_json_error().
    if you are using wp_send_json_success() this code can help you:

    success: function(response) {
    setTimeout(function() {
        jQuery("#check-email").html(response.data);
    }, 3000);
}

    and if you have an empty error callback in your ajax request use this code to help more:

    error: function(jqXHR, textStatus, errorThrown) {
    console.log('AJAX Error:', textStatus, errorThrown);
}
    Login or Signup to reply.
  2. 0 
    div class="form-group container-fluid">
        <label for="Registrant" class="inlineEditor">Email</label>
        <div class="row">
            <div class="col">
                <input type="email" required class="form-control checking_email" name="Email" id="Email" placeholder="[email protected]" oninput="checkemail()" style="background-color:rgb(248, 250, 251);" />
                <small id="FirstName" class="text-muted"></small>
                <div class="invalid-feedback">Please provide a valid email address.</div>
                <span id="check-email"></span>
            </div>
        </div>
    </div>
    <script>
        function checkemail() {
            const email = document.getElementById('Email').value;
            jQuery.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                data: {
                    'action': 'emailval',
                    'Email': email
                },
                type: "POST",
                dataType: 'json',
                success: function(response) {
                    setTimeout(function() {
                        if (response.success) {
                            jQuery("#check-email").html(response.data);
                            jQuery("#Email").removeClass("is-invalid").addClass("is-valid");
                        } else {
                            jQuery("#check-email").html(response.data);
                            jQuery("#Email").removeClass("is-valid").addClass("is-invalid");
                        }
                    }, 3000);
                },
                error: function() {
                    console.log("An error occurred during the AJAX request.");
                }
            });
        }
    </script>

add_action('wp_ajax_emailval', 'emailval');
add_action('wp_ajax_nopriv_emailval', 'emailval');

function emailval()
{
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    global $wpdb;

    // Sanitize and validate email
    $email = sanitize_email($_POST['Email']);
    if (!is_email($email)) {
        wp_send_json_error("<span style='color:red'>Invalid email format.</span>");
    }

    $email_parts = explode('@', $email);
    $domain = array_pop($email_parts);
    $bad_domains = array('google.ca', 'hotmail.com');

    // Prepare and execute SQL safely
    $sql = $wpdb->prepare("SELECT COUNT(*) FROM {$wpdb->prefix}EmailValidation WHERE email = %s", $email);
    
    $results = $wpdb->get_var($sql);

    if ($results > 0) {
        wp_send_json_error("<span style='color:red'>It appears you are already a member. Please contact us for further assistance.</span>");
    } elseif (in_array($domain, $bad_domains)) {
        wp_send_json_error("<span style='color:red'>Please register with your personal email.</span>");
    } else {
        wp_send_json_success("<span style='color:green'>Thank you for becoming a member!</span>");
    }
}
wp_die();

    }

    Try Out this code.

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

Back To Top
Search