unable to append data properly to a JS array variable

Question

I have 2 input fields inside a div within a form element like this

<form>
<div id="si-goal-section">
    <div class="si-goal-container">
        <input type="text" class="si-input goal-icon" name="goal-icon">
        <input type="text" class="si-input goal-title" name="goal-title">
    </div>
</div>
<div>
    <button type="button" id="goal-btn">Add goal</button>
</div>
</form>

When i click on the button "Add goal" i am appending a new "si-goal-container" div. This is the script for that

$('form #goal-btn').click(function() {
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
})

i then create an array variable in JS and collect and pass the form data into it like this

var data_to_send = []
$('form').find('.si-input').each(function() {
    if($(this).hasClass('goal-icon')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
    if($(this).hasClass('goal-title')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
})

So this approach will not work because the name fields are the same and the values just get over written. What else could be done here so i could store the appended data in the array and access it later in the php side ?

i tried something like this

var data_to_send = {}
data_to_send.goal = []
$('form').find('.si-input').each(function() {
    if($(this).attr('name') != undefined) {
        data_to_send.goal.push({
            'goalIcon': $(this).find('.goal-icon').val()
            'goalTitle': $(this).find('goal-title').val()
        })
    }
})

But this too doesn't give me the required o/p i am looking for. I need my data_to_send array to look something like this in the ajax call.

...
data_to_send['bannerImage']: 
data_to_send['goalName']:
data_to_send['goalIcon'][0]:
data_to_send['goalTitle'][0]:
data_to_send['goalIcon'][1]:
data_to_send['goalTitle'][1]:
...

What would be the right way to append the fields and store it into the array ? I i am using serialize() then how do i use it only for particular fields ?

Guruprasad J Rao · Accepted Answer · 2015-11-18 10:17:35Z

1

Give an id to your first input elements of si-goal-section as below:

<div class="si-goal-container">
    <input type="text" id="goalicon_1" class="si-input goal-icon" name="goal-icon"/>
    <input type="text" id="goaltitle_1" class="si-input goal-title" name="goal-title"/>
</div>

now in JS on click event of button fetch the ids for title and icon from last si-goal-section and split it based on _ as below:

$('form #goal-btn').click(function() {
    var goalIconID=parseInt($(".si-goal-container:last .goal-icon").attr('id').split("_")[1])+1;
    //fetch .goal-icon's and goal-title's id by from last .si-goal-container and add + 1 [increment id]
    var goalTitleID=parseInt($(".si-goal-container:last .goal-title").attr('id').split("_")[1])+1;
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" id="goalicon_'+goalIconID+'" name="goal-icon"><input type="text" id="goaltitle_'+goalTitleID+'" class="si-input goal-title" name="goal-title"></div>');
    //add id to the newly created elements
})

Thus you can now have unique elements and push it to your array as values

DEMO

answered Nov 18, 2015 at 10:17

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

2 Comments

8yt3c0d3 Over a year ago

this looks interesting, i ll give this a try thanks for ur reply.

Guruprasad J Rao Over a year ago

Sure.. Let me know if you face any issues.. There are some other ways too if this didn't work for you.. Hopefully this should work.. :)

Bhushan Kawadkar · Accepted Answer · 2015-11-18 10:58:23Z

1

Try this : You can iterate over si-goal-container div and then read si-input input fields inside it. Store values in map and add map to array as shown below

$(document).ready(function(e) {
    $('form #goal-btn').click(function() {
       $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
    });

   $('form #value-goal-btn').click(function() {   
       var data_to_send = new Array();
       $('form').find('div.si-goal-container').each(function() {
           var container_data = {};
           $(this).find('.si-input').each(function(){
              container_data[$(this).attr('name')] = $(this).val();
           });
          data_to_send.push(container_data);
        });
     alert(JSON.stringify(data_to_send));
    });
});

JSFiddle Demo

answered Nov 18, 2015 at 10:58

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

2 Comments

8yt3c0d3 Over a year ago

Hey thanks for replying this works perfectly for me. I am able to send data in this format - [ {"basicsDescription":" "}, {"iconURL":"","title":""},{"iconURL":"","title":""},{"iconURL":"","title":""} ]: can you tell me how i can get it to this format [{"basicsDescription":" "},goal[{"iconURL":"","title":""},{"iconURL":"","title":""},{"iconURL":"","title":""}]]:

Bhushan Kawadkar Over a year ago

To get desired format you need to add data_to_send to another map with goal as key and then add this map to your main array.

Collectives™ on Stack Overflow

unable to append data properly to a JS array variable

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related