JavaScript AJAX passing mutltiple variables confusion

Question

Hi all I have a AJAX query which I am calling using an onclick function as seen below, the query successfully POSTs the data from the form I have on my page - and I can use the data on my php script without an issue:

function tempFunction(obj){
        var no= $(obj).attr('id');
        $.ajax({
           type: "POST",
           url: "/tempproject/main/changepage",
           data: $('form').serialize(),
           success: function(msg){
                alert( "success: " + msg ); //Anything you want
           }
        });
        window.alert(no);
    }

However I wish to also send the variable no along with the form data, I am a complete newbie when it comes to JS so could someone point me in the right direction of how to send the variable along with the serialized form data? can I append the serial data somehow? I feel this is probably really easy but I'm to new to JS

hope stackoverflow has an answer ready [link](http://stackoverflow.com/questions/6627936/jquery-post-with-serialize-and-extra-data) — Lepanto, Apr 02 '14 at 10:09

MaiKaY · Accepted Answer · 2014-04-02T10:15:23.170

3

try this

function tempFunction(obj) {
    var data = $('form').serializeArray();
    data.push(
        {
            no: $(obj).attr('id')
        }
    );

    $.ajax({
        type: "POST",
        url: "/tempproject/main/changepage",
        data: data,
        success: function (msg) {
            alert("success: " + msg); //Anything you want
        }
    });
    window.alert(no);
}

edited Apr 02 '14 at 10:15

answered Apr 02 '14 at 10:07

MaiKaY

4,422
20
28

how would I then retrieve the variable back in PHP - sorry I am a bit of a lemon – TotalNewbie Apr 02 '14 at 10:17
so you retrieve the variable in PHP `$_POST['no']` (cause you used the **POST** type to send the request) – MaiKaY Apr 02 '14 at 10:18
aha - I will try this and if it works upvote you and close the post - many thanks – TotalNewbie Apr 02 '14 at 10:18

score 0 · Answer 2 · answered Apr 02 '14 at 10:11

You may try to use jQuery Form plugin. It allows ajax submitting form transparently, without worrying about serizalization.

Plugin: http://malsup.com/jquery/form/

Your code:

$('#form').ajaxSubmit({
 data: { no: $(obj).attr('id') },
 url: "/tempproject/main/changepage",
 success: function(msg){
  alert( "success: " + msg ); //Anything you want
 }
});

JavaScript AJAX passing mutltiple variables confusion

2 Answers2