Forms with ajax, trigger ajax on form submit.

  • I want to make filter with checkboxes in WordPress. What I firstly want to achieve is to test it and send variable with ajax on checkbox click in the form.

    Here is the form with check boxes:

    
<div id="test-btn" data-id="test">test</div>
<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>

    Here is the 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);

            }
        }); 
    });
});

    Here is the function in 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');

    For now I’m just trying to test it. So when user clicks on checkbox in form that ajax is called. But I’m stuck. If I add this line to form action action="<?php echo site_url() ?>/wp-admin/admin-ajax.php", then on submit I’m stuck on ajax url: admin-ajax.php. If I remove action line from form then page simple reloads.

    When I’m using click on element, instead of form submit I’m succeeding. But I need to make it work on form submit so I can implement filtering by clicking on various checkboxes.

    If anybody can tell me what I’m doing wrong, I will build on this and actually send checkbox values from the form and execute query in function for filtering the data.

    • This topic was modified 6 years, 7 months ago by amedic. Reason: formatting

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    If rml_obj.ajax_url is set to site_url().'/wp-admin/admin-ajax.php', that’s all you need. You don’t need a form action attribute, or if one is included, its value should be empty or “#”. It’s really better to not submit the form. If you did, you’d need to preventDefault to stop it from actually submitting. I usually provide a submit button on my Ajax forms, but it’s not a real submit button, it merely looks like one. My jQuery runs on the click event of that fake submit element.

    Your data array needs to consist of the form’s field data, plus an action and nonce. For a particular checkbox, I believe you want something like f: document.getElementById("f").checked, You need to add id="f" attribute to the related checkbox field.

    Thread Starter amedic

    (@amedic)

    Hi, thank you for the reply.
    Here is rml_obj.ajax_url:
    wp_localize_script( 'rml-script', 'rml_obj', array( 'ajax_url' => admin_url('admin-ajax.php'), 'check_nonce' => wp_create_nonce('rml-nonce') ) );

    On form, if I remove action page simple reloads.

    In JS, if I’m using click on element instead of form submit I get the desired results.

    I have 16 checkboxes for now. Maybe I can use .on('change') function in JS.
    Maybe I can implement some solution from here:
    Jquery: Binding change to multiple checkboxes

    What do you think?

    Thank you!

    • This reply was modified 6 years, 6 months ago by amedic.
    Moderator bcworkz

    (@bcworkz)

    Remove the onchange="this.form.submit()" from the checkbox elements so the form does not submit, then you can remove the action attribute value (or not, but it’s more clear what your/my intention is by removing) and the page will not reload.

    Then you can use the binding technique to trigger your Ajax call. However, you don’t want the conditional if (this.checked) { because you will want to change the list upon any change. Thus you will want to send the value of this.checked and the element ID as part of data: so your PHP Ajax handler will know how to respond. It’s not important for a simple test, but it will be when the list will actually be filtered.

    I misunderstood earlier what was submitting your form due to tiny code boxes of this forum. It is clearer to me now and hopefully I will not make any more confusing suggestions.

    Thread Starter amedic

    (@amedic)

    Hi @bcworkz,

    thank you for your time and trying to help.
    My original intention is to filter results when user click on checkbox, without submit button.

    I’m not sure how to do that if I remove onchange="this.form.submit()".

    I will try with your suggestion with “change” instead of “checked” if (this.change).

    Thanks once again.

    Thread Starter amedic

    (@amedic)

    Hi @bcworkz,

    thank you for previous help. You have gave me a good idea. I’m using it without form:
    jQuery('#content').on('change', '#facebook_chk, #twitter_chk, #telegram_chk, #reddit_chk, #email_chk, #phone_chk, #bitcointalk_chk, #kyc_chk, #youtube_chk, #linkedin_chk, #eth_chk, #neo_chk, #xml_chk, #waves_chk, #kmd_chk, #own_chk', function(e) {

    Now it was easy to me to pass variable to php and to execute wp query and show the data. Now I have to figure out pagination with ajax.

    • This reply was modified 6 years, 6 months ago by amedic.
    Moderator bcworkz

    (@bcworkz)

    “pagination with ajax”
    Good question! My initial thought is to have script keep track of the complete checkbox state (or fetch it on page request), along with the current page. That information sent by Ajax should be enough to query for any previous or next page. Fill the same container with the results, no need to actually load a new page.

    You’ll need special handling for page 1 and final page so “links” do not appear for page 0 or final+1

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Forms with ajax, trigger ajax on form submit.’ is closed to new replies.