0

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

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
    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
    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
    Jun 2, 2020 at 16:32
  • (additional) I've done ajax like that for years (outside of wordpress) and it kinda makes sense
    – djack109
    Jun 2, 2020 at 16:33

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.