Sending form data and action to wordpress admin-ajax.php

Question

I have a form that I want to send its data to admin-ajax:

<form method="POST" id="form">
    <input type="text" name="name">
    <input type="number" name="phone">
    <input type="email" name="email">
    <textarea name="overview"></textarea>
    <input type="submit" name="submit" id="submit" value="Submit">
</form>

Javascript/jQuery code to send the data using Ajax:

document.getElementById('submit').addEventListener('click', function(e){
    e.preventDefault();
    var form_data = $('#form').serialize();
    $.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
        method: "POST",
        data: form_data + {action: 'my_action'},
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log('Error:' + err);
        }
    });
});

Also tried formData:

var form_data = new FormData();
form_data.append('form', $('#custom').serialize());
form_data.append('action', 'my_action');

How to send the form data and the action my_action?

Vel · Answer 1 · 2018-09-08T08:26:52.073

1

you need to change this line from data: form_data + {action: 'my_action'}, to data: {action: 'my_action', form_data:form_data},

jQuery(document).on("click","#submit", function(){
    e.preventDefault();
    var form_data =jQuery('#form').serializeArray();
    jQuery.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
        method: "POST",
        data: {action: 'my_action', form_data:form_data},
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log('Error:' + err);
        }
    });
});

and change input type submit to button.

edited Sep 08 '18 at 08:26

answered Sep 08 '18 at 08:09

Vel

9,027
6
34
66

Why to change the input type to button? – Sep 08 '18 at 08:13
if you want to use ajax no need to use submit button – Vel Sep 08 '18 at 08:14
if you are using submit button you can get the value on `$_POST` – Vel Sep 08 '18 at 08:15
What if one of these inputs is an image `` ?, I remove some of the src code, As it's very long – Sep 08 '18 at 08:24
try like this `var form_data = $('#form').serializeArray(); form_data .push({ name: "", value: "" });` – Vel Sep 08 '18 at 08:27
here is a solution for you: https://stackoverflow.com/questions/10398783/jquery-form-serialize-and-other-parameters – Sigma Sep 08 '18 at 08:52
@Sigma, he want to send image in ajax – Vel Sep 08 '18 at 08:59
In the example code i see only name, phone, email and text area i suppose like a comment, if he want to send an image as an extra parameter to the serialized form may be the best solution is to include a hidden input in the form where is the image and than just submit the serialized form without need to use extra parameters – Sigma Sep 08 '18 at 09:13

Sigma · Answer 2 · 2018-09-08T09:17:55.800

In general i prefer to use this way, like in your case you are using submit type button:

$(document).on('click', '#submit', function(){ // the id of your submit button
     var form_data = $('#your_form_data_id'); // here is the id of your form
     form_data.submit(function (e) {
        var my_action = "my_action";
        e.preventDefault();
           $.ajax({
              type: form_data.attr('method'), // use this if you have declared the method in the form like: method="POST"
              url: form_data.attr('action'), // here you have declared the url in the form and no need to use it again or you can also use the path like in your code
              data: form_data.serialize() +'&'+$.param({ 'my_action': my_action}), // here you are sending all data serialized from the form and appending the action value you assing when declare var my_action
              success: function (data) {
                    // after the success result do your other stuff like show in console, print something or else
              },
           });
      });
 });

Hope it helps you. if anything is not clear feel free to ask, i try to explain in the comments.

score 0 · Answer 3 · answered Sep 08 '18 at 10:04

0

You should just pass form to new FormData() so in your case when submitting the form just pass new FormData(e.target);

Hope it helps

answered Sep 08 '18 at 10:04

Raf

352
2
11

Sending form data and action to wordpress admin-ajax.php

3 Answers3