I'm running locally on Windows 10 and I'm a full admin on my computer. Any ideas?

Basically I'm trying to send an email from the form. I just started the code and wanted to test that the ajax was getting called. I have SMTP configured.

<div class="chat-form">
    <form class="form-container" id="chat-form">        
        <input type="hidden" name="nonce" value="<?php echo wp_create_nonce( ) ?>" />
        <div class="form-group row">
            <div class="col">
                <input type="email" class="form-control" placeholder="Your email" id="email" name="email" required />
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                <textarea class="form-control" placeholder="Type your message" id="message" name="msg" rows =10 required></textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                <button type="submit" class="btn btn-sm btn-primary btn-block submit" name="submit">Send</button>
            </div>
        </div>
    </form>
    <div class="form-group row">
        <div class="col text-right">
            <button type="button" name="message" class="btn btn-sm btn-success chat" title="Open message window"><i class="far fa-comment"></i></button>
        </div>
    </div>
</div>

<script>
(function($) {

    $(".submit").on("click", function (e) {
        e.preventDefault();
        //e.stopPropagation();        

        let endpoint = "<?php echo admin_url( "admin-ajax.php" )?>";

        let form = $("#chat-form").serialize();

        let formData = new FormData;

        formData.append("action", "enquiry");
        formData.append("enquiry", form);
        //alert (url);

        $.ajax( endpoint, {

            type: "POST",
            data: formData,
            processData: false,
            contentType: false,

            success: function(response) {

                alert(response.data)
            },
            error: function(err) {

            }
        });
    });

})(jQuery)
</script>

In functions.php I have this

add_action("wp_ajax_enquiry", "send_message_form");
add_action("wp_ajax_nopriv_enquiry", "send_message_form");

function send_message_form() {

    wp_send_json_success("Yes it works");
}

And thats as far as I got

I'm running locally on Windows 10 and I'm a full admin on my computer. Any ideas?

Basically I'm trying to send an email from the form. I just started the code and wanted to test that the ajax was getting called. I have SMTP configured.

<div class="chat-form">
    <form class="form-container" id="chat-form">        
        <input type="hidden" name="nonce" value="<?php echo wp_create_nonce( ) ?>" />
        <div class="form-group row">
            <div class="col">
                <input type="email" class="form-control" placeholder="Your email" id="email" name="email" required />
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                <textarea class="form-control" placeholder="Type your message" id="message" name="msg" rows =10 required></textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class="col">
                <button type="submit" class="btn btn-sm btn-primary btn-block submit" name="submit">Send</button>
            </div>
        </div>
    </form>
    <div class="form-group row">
        <div class="col text-right">
            <button type="button" name="message" class="btn btn-sm btn-success chat" title="Open message window"><i class="far fa-comment"></i></button>
        </div>
    </div>
</div>

<script>
(function($) {

    $(".submit").on("click", function (e) {
        e.preventDefault();
        //e.stopPropagation();        

        let endpoint = "<?php echo admin_url( "admin-ajax.php" )?>";

        let form = $("#chat-form").serialize();

        let formData = new FormData;

        formData.append("action", "enquiry");
        formData.append("enquiry", form);
        //alert (url);

        $.ajax( endpoint, {

            type: "POST",
            data: formData,
            processData: false,
            contentType: false,

            success: function(response) {

                alert(response.data)
            },
            error: function(err) {

            }
        });
    });

})(jQuery)
</script>

In functions.php I have this

add_action("wp_ajax_enquiry", "send_message_form");
add_action("wp_ajax_nopriv_enquiry", "send_message_form");

function send_message_form() {

    wp_send_json_success("Yes it works");
}

And thats as far as I got

• php
• plugin-development
• ajax

Share Improve this question asked Jun 2, 2020 at 13:04 djack109djack109 12166 bronze badges 4

• 1 I suspect you're using nonces incorrectly, however, is there a reason you went for the old legacy Admin AJAX API instead of the new modern REST API? The REST API gives human readable error messages, pretty permalink URLs, and is a lot easier to work with – Tom J Nowell ♦ Commented Jun 2, 2020 at 13:48
• 1 I agree with Tom, but anyway, you should just do data: form + '&action=enquiry' without having to use FormData. And you could also use the browser's dev tools to inspect the request and see if the data are good. – Sally CJ Commented Jun 2, 2020 at 14:29
• I'm new to WordPress programming I've done all manner of languages over the years.. Looking at all the Ajax articles (some even just s few months old) they all suggested doing it this way. If there is another (better) way to do it I'm all ears. – djack109 Commented Jun 2, 2020 at 16:32
• (additional) I've done ajax like that for years (outside of wordpress) and it kinda makes sense – djack109 Commented Jun 2, 2020 at 16:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

It's working, I traced it by digging through admin-ajax.php to see what was responding with 401/400. My fix was basically making the action parameter the last thing appended to the formData

    formData.append("enquiry", form);
    formData.append("action", "enquiry");

I don't normally use formData to post things, .serialize() has always been enough for me over the years. As I spend most of my time doing C# and PHP using JSON without the WordPress overhead I just assumed the same things not taking into consideration you need to hook into WordPress to make everything behave.

But I do vaguely recall something (non-WordPress) from a fair while back about the order of items added to formData, Or I might just have dreamt it.

@Tom: I'd still be interested to hear more about the REST solution.