create dynamic formdata in jQuery

Question

I have a form from there i want to send form data to the server side .But i am not able to create dynamic query string in jquery .I have a html like this :

<div>
    <ul class="items" id ="test">
        <li class="test" id="11" attr ="11"></li>
        <li class="test" id="12" attr ="12"></li>
        <li class="test" id="13" attr ="13"></li>
        <li class="test" id="14" attr ="14"></li>

    </ul>
    <ul class="items" id ="test1">
        <li class="test" id="21" attr ="21"></li>
        <li class="test" id="22" attr ="22"></li>
        <li class="test" id="23" attr ="23"></li>
        <li class="test" id="24" attr ="24"></li>
    </ul>
     <ul class="items" id ="test2">
        <li class="test" id="31" attr ="31"></li>
        <li class="test" id="32" attr ="32"></li>
        <li class="test" id="33" attr ="33"></li>
        <li class="test" id="34" attr ="34"></li>
    </ul>
</div>

I have done this in jQuery

var ids=[];
$('ul.items').each(function(){
    var id = $(this).attr('id').replace(/test/,'');
    var tmp_arr=[];
    $($(this).find("li")).each(function(){
        var attr_val = $(this).attr("attr");
        tmp_arr.push({$(this).attr('id')});
    });
    ids.push(tmp_arr);
});

But my desired jquerystring is like this

{
    "test"=>{
        "ids"=>['11','12','13','14'],
        "attr=>['11','12','13','14']"
        },
    "test1"=>{
        "ids"=>['21','22','23','24'],
        "attr=>['21','22','23','24']"
        },
    "test2"=>{
        "ids"=>['31','32','33','34'],
        "attr=>['31','32','33','34']"
        }
}

How can we create this jQuery please help me

I'm confused. Firstly, what you have is not a form, but a couple of lists. Secondly you say you want a querystring yet the format you have as an example is an object...? — Rory McCrossan
– Rory McCrossan, Commented Dec 10, 2014 at 11:21
@RoryMcCrossan i have just posted the div not the form .on the server side i want the same structure as i posted in the question.I haven't done this in jquery i need help to do this — Developer
– Developer, Commented Dec 10, 2014 at 11:26
So you want to work with HTML you posted and from that retrieve array structure like you posted? — dfsq
– dfsq, Commented Dec 10, 2014 at 11:35

dfsq · Accepted Answer · 2014-12-10 11:36:23Z

Try something like this. Array.prototype.map is helpful here:

var data = {};
$('.items').each(function() {
    var children = $(this).children().toArray();
    data[this.id] = {
        ids: children.map(function(el) {
            return el.id;
        }),
        attrs: children.map(function(el) {
            return el.getAttribute('attr');
        })
    };
});

alert(JSON.stringify( data, null, 4 ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul class="items" id ="test">
        <li class="test" id="11" attr ="11"></li>
        <li class="test" id="12" attr ="12"></li>
        <li class="test" id="13" attr ="13"></li>
        <li class="test" id="14" attr ="14"></li>

    </ul>
    <ul class="items" id ="test1">
        <li class="test" id="21" attr ="21"></li>
        <li class="test" id="22" attr ="22"></li>
        <li class="test" id="23" attr ="23"></li>
        <li class="test" id="24" attr ="24"></li>
    </ul>
     <ul class="items" id ="test2">
        <li class="test" id="31" attr ="31"></li>
        <li class="test" id="32" attr ="32"></li>
        <li class="test" id="33" attr ="33"></li>
        <li class="test" id="34" attr ="34"></li>
    </ul>
</div>

great it's working but i have formdata like this formData +='&'+inputName+'='+inputValue; Now in this want to add this test as key that will contain both ids and attr
Not sure I understand what you are after. Can you add more details?
actually i have formdata as a query string that i am sending with ajax to the server side now as formData +='&'+inputName+'='+inputValue;.Now i am bit confused how could i append this data into this form data and send this from ajax to the server side so that i can access these data

Collectives™ on Stack Overflow

create dynamic formdata in jQuery

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related