Предотвращение стандартного поведения не останавливает обновление страницы. Передача информации формы в PHP и обратно с помощью AJAX на сайте WordPress.

Вопрос или проблема

function add_entry(){
    ?>
    <form action="" method="post" id="ajax-add-to-form" autocomplete="off">
        <input type="text" id="FName" name="FName" placeholder="Имя" value="" required>
        <input type="text" id="LName" name="LName" placeholder="Фамилия" value="" required>
        <select id="size" required>
            <option value="">Размер</option>
            <?php  for($i=1; $i<=15; $i++){?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
            <?php } ?>
        </select>
        <input type="text" id="MobileNumber" name="MobileNumber" placeholder="Номер телефона" value="" required>
        <input type="email" id="Customer_Email" name="Customer_Email" placeholder="Адрес электронной почты" value="" required>
        <input type="submit"  name="ajax-add-to-form" value="Добавить">
<?php
    
    }
add_shortcode('add_entry', 'add_entry');


</form>

jQuery('document').ready( function(){
jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault(); 
jQuery('#jx-loading').show();
jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    data: { 
    action: 'ajax-php-function'},
    success: function(data)
    {jQuery('#jx-loading').hide();}
})          
}); 
return false;       
});

function ajax-php-function() {          
    global $wpdb;   
    $table = "mytablename";     
    $FName= $_POST['FName'];    
    $LName= $_POST['LName'];    
    $MobileNumber= $_POST['MobileNumber'];  
    $Email = $_POST['Email '];          
    $data = array(
    'FName' => $FName,
    'LName' => $LName,      
    'MobileNumber' => $MobileNumber,        
    'Email' => $Email);     
    $success = $wpdb->insert( $table, $data );          
    if($success)
    {echo json_encode($last_data);} 
    else{       echo 'error';   }   die;            
}   

jQuery(document).on('submit', '#ajax-add-to-waitlist-form', function(e){
  e.preventDefault();

jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault(); 

Ответ или решение

Конечно, давайте разберем вашу ситуацию полностью и попробуем решить проблему с отправкой формы через AJAX в WordPress.

1. Структура формы

Сначала давайте убедимся, что ваша форма правильно настроена. В вашем коде есть несколько моментов, которые необходимо исправить. Вот исправленный код:

function add_entry(){
    ?>
    <form action="" method="post" id="ajax-add-to-form" autocomplete="off">
        <input type="text" id="FName" name="FName" placeholder="First Name" required>
        <input type="text" id="LName" name="LName" placeholder="Last Name" required>
        <select id="size" name="size" required>
            <option value="">Size</option>
            <?php for($i=1; $i<=15; $i++){ ?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
            <?php } ?>
        </select>
        <input type="text" id="MobileNumber" name="MobileNumber" placeholder="Phone Number" required>
        <input type="email" id="Customer_Email" name="Customer_Email" placeholder="Email Address" required>
        <input type="submit" name="ajax-add-to-form" value="Add to">
    </form>
    <?php
}
add_shortcode('add_entry', 'add_entry');

2. JavaScript для AJAX

Изменим JavaScript-код для правильного захвата события submit и передачи данных в AJAX-запросе. Также убедитесь, что вы правильно передаете данные формы:

jQuery(document).ready(function(){
    jQuery(document).on('submit', '#ajax-add-to-form', function(e){
        e.preventDefault();
        jQuery('#jx-loading').show();

        var formData = jQuery(this).serialize(); // Сериализуем данные формы

        jQuery.ajax({
            type: 'POST',
            url: my_ajax.ajax_url,
            data: formData + '&action=ajax-php-function', // Добавляем данные формы и действие
            success: function(response) {
                jQuery('#jx-loading').hide();

                // Обработка успешного ответа
                console.log(response);
                // Вы можете добавить, что делать с ответом здесь
            },
            error: function() {
                jQuery('#jx-loading').hide();
                // Обработка ошибки
                console.log('Ошибка при отправке AJAX-запроса');
            }
        });

        return false; // Не обязательно, так как e.preventDefault() предотвращает стандартное поведение
    });
});

3. PHP-обработчик AJAX-запроса

Теперь завершим настройку вашего PHP-кода так, чтобы он принимал данные правильно:

add_action('wp_ajax_ajax-php-function', 'ajax_php_function');
add_action('wp_ajax_nopriv_ajax-php-function', 'ajax_php_function'); // Для незарегистрированных пользователей

function ajax_php_function() {
    global $wpdb;   
    $table = 'mytablename'; // Убедитесь, что таблица существует

    // Получаем данные из запроса
    $FName = isset($_POST['FName']) ? sanitize_text_field($_POST['FName']) : '';
    $LName = isset($_POST['LName']) ? sanitize_text_field($_POST['LName']) : '';
    $MobileNumber = isset($_POST['MobileNumber']) ? sanitize_text_field($_POST['MobileNumber']) : '';
    $Customer_Email = isset($_POST['Customer_Email']) ? sanitize_email($_POST['Customer_Email']) : '';

    $data = array(
        'FName' => $FName,
        'LName' => $LName,
        'MobileNumber' => $MobileNumber,
        'Email' => $Customer_Email
    );

    $success = $wpdb->insert($table, $data);
    if ($success) {
        echo json_encode(array('status' => 'success', 'message' => 'Данные успешно добавлены.'));
    } else {
        echo json_encode(array('status' => 'error', 'message' => 'Ошибка при добавлении данных.'));
    }
    wp_die(); // Обязательно используйте wp_die(), чтобы завершить выполнение скрипта
}

Общие рекомендации

1. Проверьте консоль: Если AJAX-запрос не работает, проверьте консоль разработчика (F12) в браузере на наличие ошибок JavaScript или проблем с запросами.

2. Функция wp_localize_script: Убедитесь, что вы используете функцию wp_localize_script() для передачи my_ajax.ajax_url в ваш JavaScript файл. Пример:

   function my_enqueue_scripts() {
       wp_enqueue_script('my_ajax_script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery'), null, true);
       wp_localize_script('my_ajax_script', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
   }
   add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Эти изменения должны помочь вам правильно настроить форму, предотвратить её перезагрузку и передавать данные с помощью AJAX в вашем проекте на WordPress. Если у вас останутся вопросы, не стесняйтесь их задавать.