CODEWITHSUNDEEP
javascriptjquery
hnewbie
hnewbie

Reputation: 147

Set an array of the checkbox values with another array of values

I have a set of input checkboxes on a form that look like this: 

<input type="checkbox" value=""><span value="Atlanta">Atlanta</span>
<input type="checkbox" value=""><span value="Charleston">Charleston</span>
<input type="checkbox" value=""><span value="Chicago">Chicago</span> and etc.

The above is due to running this, $dataTable.ajax.reload(), and for some reason this erases the values of the checkboxes in my form. These checkboxes are not hardcoded and are being dynamically generating.

Instead of doing the below, I realize I can just refresh the page and get all the value back, but I'd like to see if there is another way to do what I'm trying to do below.

Anywho, I took the span text of each checkbox, turned that into an array and called it spanarr. I also turned the input checkboxes into an array, called emergcheck. 

var emergspanarr = $('#emergencyForm span').toArray();
var spanarr = [];
var emergcheck = $('#emergencyForm input[type="checkbox"]');

emergspanarr.map(function(item){
    spanarr.push(item.innerHTML.trim());
});

I'm trying to insert one span value (from spanarr) into each of input checkbox (from emergcheck).

What I have so far: 

for (var j = 0; j < emergcheck.length; j++){
    for (var k = 0; k < spanarr.length; k++){
        emergcheck.attr("value", function(i, val){
            return val + spanarr[k];
        })          
    }                   
}

But it's producing this:

<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Atlanta">Atlanta</span>

<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Charleston">Charleston</span> and etc.

I want it to be this instead: 

<input type="checkbox" value="Atlanta"><span value="Atlanta">Atlanta</span>
<input type="checkbox" value="Charleston"><span value="Charleston">Charleston</span>
<input type="checkbox" value="Chicago"><span value="Chicago">Chicago</span

I feel like I am close. What am I missing? In need of another pair of eyes. Thanks,

Upvotes: 1

Views: 163

Answers (2)

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Just try to change code with below code -

JS Code - 

for (var j = 0; j < emergcheck.length; j++){
    emergcheck.eq(j).val(spanarr[j]);                
}

Maybe it can help you.

Upvotes: 2

Christopher M Miller
Christopher M Miller

Reputation: 132

I think you just want the value of the input. You can use .val() from jQuery or just .value as pure js.

jQuery way:

var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();

for (var j = 0; j < emergcheck.length; j++) {
    emergcheck[j].val(emergspanarr[j].val());
}

Pure js way:

var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();

for (var j = 0; j < emergcheck.length; j++){
    emergcheck[j].value = emergspanarr[j].value;
}

Upvotes: 1

Related Questions