how to send dynamic data using ajax

Question

normally, we have a ajax request like:

$.ajax({
    type: 'GET',
    url: "/biboundsoptimization",
    data: {
        objects: '2',
    },
    success: function (data) {
        console.log(data);
        alert(data);
    },
    error: function (data, status, er) {
        alert("error: " + data + " status: " + status + " er:" + er);
    }
});

but now I cannot know the number of variables in the data field . For example, when the client enters 2 the data field should be like:

data: {
    objects1: value of objects1,
    objects2: value of objects2,
},

if the client enters 3 the data field should be like:

data: {
    objects1: value of objects1,
    objects2: value of objects2,
    objects3: value of objects3,
},

Before the ajax request, the client has already entered the value of each objects into different input fields. But i don't know the number until he enters it. So i cannot write as above. it is obvious that a loop is required to get all the objects by looping over the number of loops provided by the client. I tried to something like:

for (int i = 1; i < clientValue; i++) {
    'objects' + i: $('#objects' + i).val(),
}

But it doesn't work. Grammatically it is wrong. Can anyone help me with that? Thanks!

what error are you getting? Do you have a valid value in clientValue? — Nitesh
– Nitesh, Commented Aug 28, 2013 at 5:24
Why not put all the values into an array, and then pass the array to your ajax call? — DiMono
– DiMono, Commented Aug 28, 2013 at 5:24

monkeyhouse · Accepted Answer · 2018-09-06 21:28:46Z

3

try using the $.each jquery function

var data = {};
$('#objects input').each(function(){
    data.push(this.value);
});

edited Sep 6, 2018 at 21:28

answered Aug 28, 2013 at 5:25

monkeyhouse

2,8963 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zs2020 Over a year ago

It does not create an object, which is not what OP asked about.

Ginger and Lavender Over a year ago

This worked great for me, but I had to create an empty array like var data = [];.

Zubair1 · Accepted Answer · 2013-08-28 14:59:34Z

2

If your data is coming from a FORM.. you can use the jquery serialize function to automatically wrap it all up together for you.

       var formData = $('#yourform').serialize();

you can then do some thing like this in your ajax request

       var request = $.ajax({
            type: 'POST',
            url: 'ajaxHandler.php',
            cache: false,
            data: formData, //all the data is automatically ready for you now
            dataType: 'json'
        });

answered Aug 28, 2013 at 14:59

Zubair1

2,7803 gold badges32 silver badges40 bronze badges

Comments

zs2020 · Accepted Answer · 2013-08-28 05:25:17Z

1

You can dynamically create the object containing all objects like this:

var dataToPost = {};

for(int i = 1; i < clientValue; i++){
     dataToPost['objects' + i] = $('#objects' + i).val();
}

And then pass in the ajax call like this

data: dataToPost,

answered Aug 28, 2013 at 5:25

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Comments

NaYaN · Accepted Answer · 2013-08-28 05:26:15Z

0

var objects = [];

for(int i = 1; i < clientValue; i++){
       objects[i]: $('#objects' + i).val(),
}

answered Aug 28, 2013 at 5:26

NaYaN

1,3207 silver badges11 bronze badges

Comments

Didin Sino · Accepted Answer · 2013-08-28 05:30:32Z

0

add class too all your input and use $.each function

<input id="object1" class="object" />
<input id="object2" class="object" />
var data = {};
var id;
$('.object').each(function(){
   id = $(this).attr('id');
   data[id] = $(this).val();
});

answered Aug 28, 2013 at 5:30

Didin Sino

3063 silver badges5 bronze badges

Collectives™ on Stack Overflow

how to send dynamic data using ajax

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related