Form AJAX PHP doesn't send POST datas to WordPress Database

Question

I've been searching for weeks a solution to my trouble within the community and tutorials but I can't find answers.

I've created a form to register subscribers for a newsletter to my WordPress database. Using PHP only, POST datas were send to the database. However, I wanted to use that form with ajax, to stop the page from refreshing. Now, no datas are send to the database anymore and I don't understand why.

With the code below, I get the following informations in console:

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• POST http://localhost/ /wp/wp-admin/admin-ajax.php 400 (Bad Request)
• error [object Object] Bad Request

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <div class="col s12 m6 newsletter">
      <div id="form_output"></div>
      <form id="newsletter" class="newsletter__form">
        <div>
          <input value="" type="text" name="first_name" id="first_name" placeholder="Prénom" autocomplete="given-name">
          <input value="" type="text" name="last_name" id="last_name" placeholder="Nom" autocomplete="family-name">
          <input value="" type="email" name="email" id="email" placeholder="Email">
        </div>
        <button class="newsletter__button" type="submit">Je m'abonne</button>
        <input type="hidden" name="register" value="newsletter" />
      </form>
    </div>

    $('#newsletter').on('submit', function(event) {
      event.preventDefault();
      var datas = $(this).serialize();
      console.log(datas);

      $.ajax({
        type: "POST",
        url: ajaxurl,
        data: datas,
        // data: {
        //   action: 'ajax_newsletter'
        // },
        success: function(data, result) {
          console.log(result + ' ' + data);
          $("#form_output").html('Ok');
        },
        error: function(data, result, error) {
          console.log(result + ' ' + data + ' ' + error);
          $("#form_output").html('Erreur');
        },
      });
    });

    <?php

    function eglise_scripts()
    {
        wp_enqueue_style(
            'eglise-style-css',
            get_theme_file_uri('/public/css/style.css'),
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'eglise-js',
            get_theme_file_uri('/public/js/app.js'),
            [],
            '1.0.0',
            true
        );

        wp_localize_script( 
            'eglise-js', 
            'ajaxurl', 
            admin_url( 'admin-ajax.php' )
        );

    }

    add_action('wp_enqueue_scripts', 'eglise_scripts');

add_action('wp_ajax_nopriv_ajax_newsletter', 'ajax_newsletter');
add_action('wp_ajax_ajax_newsletter', 'ajax_newsletter');

function ajax_newsletter()
{
  global $wpdb;

  $users = $wpdb->prefix . 'users';

  if (isset($_POST['register']) && $_POST['register'] == 'newsletter') {

    $first_name = $wpdb->escape(trim($_POST['first_name']));
    $last_name = $wpdb->escape(trim($_POST['last_name']));
    $email = $wpdb->escape(trim($_POST['email']));

    if (empty($email) || empty($first_name) || empty($last_name)) {
      echo 'Merci de compléter les champs.';
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      echo 'Addresse email invalide.';
    } else if (email_exists($email)) {
      echo 'Email déjà existant. ';
    } else {

      // create columns firstname and lastname
      $row_firstname = $wpdb->get_results("SELECT COLUMN_NAME 
        FROM INFORMATION_SCHEMA.COLUMNS 
        WHERE table_name = 'wp_users' 
        AND column_name = 'first_name'
      ");
      $row_lastname = $wpdb->get_results("SELECT COLUMN_NAME 
        FROM INFORMATION_SCHEMA.COLUMNS 
        WHERE table_name = 'wp_users' 
        AND column_name = 'last_name'
      ");
      if (empty($row_firstname)) {
        $wpdb->query("ALTER TABLE $users ADD first_name VARCHAR(255) NOT NULL");
      } elseif (empty($row_lastname)) {
        $wpdb->query("ALTER TABLE $users ADD last_name VARCHAR(255) NOT NULL");
      }

      // insert user
      $newUser = $wpdb->INSERT($users, [
        'first_name' => apply_filters('pre_user_first_name', $first_name),
        'last_name' => apply_filters('pre_user_last_name', $last_name),
        'user_email' => apply_filters('pre_user_user_email', $email),
        'user_registered' => current_time('mysql')
      ]);


      if (is_wp_error($newUser)) {
        echo 'Une erreur s\'est produite.';
      } else {
        echo 'Vous êtes désormais inscrit';
      }
    }
  }
  wp_die();
}

If I change in my js file data: datas into data: { action: 'ajax_newsletter'} , I get the following informations in console:

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• success

In my wp_users database, nothing has been added.

If then, I comment the following conditions in my function ajax_newsletter() :

    //if (isset($_POST['register']) && $_POST['register'] == 'newsletter') {

       // if (empty($email) || empty($first_name) || empty($last_name)) {
       //   echo 'Merci de compléter les champs.';
       // } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       //   echo 'Addresse email invalide.';
       // } else if (email_exists($email)) {
       //   echo 'Email déjà existant. ';
      // } else {

The console tells:

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• success
• Vous êtes désormais inscrit

In my wp_users db a new empty line is added, with only the "id" and "current date and time of creation" completed.

--

Do you have any idea of what I'm doing wrong? Thanks in advance for any help !

Answer 1

You need an "action" field to make WordPress AJAX work.

But you also need individual fields for your function.

Make a "newsletter" action, like wp_ajax example

Example:

        $('#newsletter').on('submit', function(event) {
      event.preventDefault();
        var first_name = jQuery('#first_name').val();
        var last_name = jQuery('#last_name').val();
      var email = jQuery('#email').val();
        var newsletter = jQuery("input[name=newsletter]").val();

      $.ajax({
        type: "POST",
        url: ajaxurl,
   data: {
      name: name,
      action: 'newsletter',
          first_name: first_name,
          last_name: last_name,
          email: email,
          newsletter : newsletter },
        success: function(data, result) {
          console.log(result + ' ' + data);
          $("#form_output").html('Ok');
        },
        error: function(data, result, error) {
          console.log(result + ' ' + data + ' ' + error);
          $("#form_output").html('Erreur');
        },
      });
    });

Then it should work.