Passing data "of two types" via jQuery/AJAX to .php file? (Syntax)

Question

I am very new to jQuery/AJAX and I am looking for help. This is the relevant code-snippet:

$(function () {
    $('.button').on('click', function (event) {

        event.preventDefault(); //prevents page from refreshing

        $.ajax({
            type: 'POST',
            url: 'test2.php',
            data: ?????
            success: function (data) {
                alert('form was submitted');
                $('.text').html(data);
            }
        });
    });
});

So, the data I want to pass is for one data: $('#form').serialize(), and for the other data: { test : test.name },
Basically I want to send a whole form and another parameter. How do I correctly express my wishes to jQuery?
I have tried the following options and they did not work:

$.ajax({
                type: 'POST',
                url: 'test2.php',
                data: $('#form').serialize(), data: { test : test.name },
                success: function (data) {
                    alert('form was submitted');
                    $('.text').html(data);
                }
            });

and

$.ajax({
                type: 'POST',
                url: 'test2.php',
                data: $('#form').serialize(), { test : test.name },
                success: function (data) {
                    alert('form was submitted');
                    $('.text').html(data);
                }
            });

and

$.ajax({
            type: 'POST',
            url: 'test2.php',
            data: $('#form').serialize()
        });
$.ajax({
            type: 'POST',
            url: 'test2.php',
            data: { test : test.name },
            success: function (data) {
                alert('form was submitted');
                $('.text').html(data);
            }
        });

The php document basically just echos out said data.
Help a newbie out!

your question has already answer at https://stackoverflow.com/questions/10398783/jquery-form-serialize-and-other-parameters @Denis — Pritamkumar, Aug 23 '17 at 14:55
Thanks David, did not find this when I searched for some reason... — Denis, Aug 24 '17 at 06:51

score 0 · Answer 1 · answered Aug 23 '17 at 14:56

0

Create an object to hold all your information:

var dataToSend = {};
dataToSend.form = $('#form').serialize();
dataToSend.extraData = { test : test.name };

then post it:

$.ajax({
    data: dataToSend
})

answered Aug 23 '17 at 14:56

Stuart

6,630
2
24
40

interesting, I have never looked into objects until now. Thank you very much, I'll try it out – Denis Aug 23 '17 at 14:57

score 0 · Accepted Answer · answered Aug 23 '17 at 14:57

Try

data = {}
data["form"] = $('#form').serialize();
data["test"] = test.name;
$.ajax({
            type: 'POST',
            url: 'test2.php',
            data: data,
            success: function (data) {
                alert('form was submitted');
                $('.text').html(data);
            }
        });

You need to supply a JSON object to the data property for your ajax. What I did was basically create a new object, and add 2 elements.

Hope this helps!

Passing data "of two types" via jQuery/AJAX to .php file? (Syntax)

2 Answers2