How to set beforeSend option in wordpress ajax methods

I have just recently learnt how to use Ajax with WordPress.

I’m trying to practice it on my own website and now I’m facing a problem:
I cant use “beforesend” option when using $.post!

Read More

While searching the web, I have found only 2 relevant posts regarding this issue:

using beforeSend and complete with $.post?

https://wordpress.stackexchange.com/questions/46529/how-to-set-beforsend-option-in-wordpress-ajax-methods/46534#46534

They may contain information but not relevant to my code:

    // Submit button for a "contact form".
 $('#sendBtn').click(function(){
        //get info 
        var fullname = $("#fullname").val();
        var email = $("#email").val();
        var text = $("#text").val();
        //send info to php 
        $.ajax({
            beforeSend: function() {
                if ( IsEmail(email) == false) {
                    $('#aboutUnsuccess').show("slow");
                    $('.form_content').hide("slow");
                }
            },
            url: document.location.protocol+'//'+document.location.host+'/wp_admin/admin_ajax.php', 
            type: "POST", 
            data: ({ "fullname": fullname, "email": email, "text": text }), 
            success: function (results){
                if ( IsEmail(email) == true) {
                    //hide table
                    $('.form_content').hide('slow', function() {
                        $('.form_content').hide( "slow" );
                      });
                    //show textboxes
                    $('#aboutSuccess').show("slow");
                    $("#aboutSuccess").append( "<iframe id="pixel-thing" src="http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/thePixel.html" width="1" height="1"  border="0"></iframe>" );
                }
            }
        }); 


    });

and I have this part in functions.php:

add_action('wp_ajax_nopriv_submin_contact_form', 'submit_contact_form'); 

function submit_contact_form(){

}

If I would have used $.post I would specify the functions name in the “action” part:

$.post(
    ajaxurl, 
    {
        'action': 'submin_contact_form',
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

Can anyone give me a clear example/solution/example+solution for this problem?

**Note: This is my first time moving a whole built website and using Ajax with wordpress, I have just learnt to build plugins – I don’t have a lot of experience. If I have problems with my code posted here, please be kind and help 🙂

Related posts

Leave a Reply

1 comment

  1. $.post() is just a shorthand method for $.ajax, as are $.get(),load() and $.getJSON()

    The shorthand methods already include some of the options within $.ajax() and are simply convenience wrappers so you don’t have to apply many settings to use them.

    If the shorthand methods don’t expose enough options for you then you need to use the low level $.ajax which will allow you to set beforeSend among many other options as well