Wordpress - формы с ajax

Я хочу сделать фильтр с флажками в Wordpress. Сначала я хочу протестировать его и отправить переменную с помощью ajax при щелчке флажка в форме.

Вот форма с флажками:

<form  method = "post" id = "filter">
<input type = "checkbox" name = "f" value = "1" onchange = "this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
<input type = "checkbox" name = "t" value = "1" onchange = "this.form.submit()" <?php if ($twitter=='1') {echo 'checked';}?>    
<input type = "hidden" value = "myfilter"> 
</form>

Вот javascript:

jQuery(document).ready( function(){  
    jQuery('#content').on('submit', '#filter', function(e) {
        e.preventDefault();     
        var test = jQuery('#test-btn').data( 'id' );

        jQuery.ajax({           
            url : rml_obj.ajax_url,
            type : 'post',
            data : {
                action : 'test_function',
                security : rml_obj.check_nonce,
                test_data : test
            },
            success : function( response ) {
                alert (test);               
                jQuery('#result').html(response);

            }
        }); 
    });
});

Вот функция в functions.php:

function test_function() {  
    check_ajax_referer( 'rml-nonce', 'security' );  
    $test_data = $_POST['test_data'];
    echo $test_data; 
    die();
}
add_action('wp_ajax_test_function', 'test_function'); 
add_action('wp_ajax_nopriv_test_function', 'test_function');

А пока я просто пытаюсь это проверить. Поэтому, когда пользователь нажимает флажок в форме, вызывается ajax. Но я застрял. Если я добавлю эту строку в действие action = "<?php echo site_url() ?>/wp-admin/admin-ajax.php", то при отправке я застряну на URL-адресе ajax: admin-ajax.php. Если я удалю строку действия из формы, страница просто перезагрузится.

Когда я использую щелчок по элементу вместо отправки формы, я преуспеваю. Но мне нужно заставить его работать при отправке формы, чтобы я мог реализовать фильтрацию, устанавливая различные флажки.

Если кто-нибудь может сказать мне, что я делаю не так, я буду опираться на это и фактически отправлять значения флажков из формы и выполнять запрос в функции для фильтрации данных.

Где test-btn в вашем HTML?

cabrerahector 04.05.2018 19:21

Чуть выше формы: <div id = "test-btn" data-id = "test">test</div>

Ante Medic 04.05.2018 21:18
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
2
754
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема была в форме onchange = "this.form.submit()". После удаления этой части я смог продолжить.

Другие вопросы по теме