Insert attribute's value of checkboxes to array in javascript

Question

I have multiple checkboxes in form with values like this

<input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001">

When checkbox is checked, and button is pressed, I will get attributes and insert into input with id arr

<input type="hidden" id="arr" name="arr" /> 

$(document).ready(function() {
    $("#btnConf").click(function(){
        var selected = [];
        $.each($("input[name='selected']:checked"), function () {
            selected.push($(this).val(), $(this).attr("id"), $(this).attr("plant"), $(this).attr("flowno"));
            document.getElementById("arr").value = selected;
        });
        console.log(selected);
    });
});

But the array which I get is

<input type="hidden" id="arr" name="arr" value="100400020719-006,ABS-02072019,VDNF,FLW-000001,100400020719-007,ABS-02072019,VDNF,FLW-000001">

How can I get the array like this:

[
    {
        "DocNo":"100400020719-006",
        "NewDocNo":"ABS-02072019",
        "Plant":"VDNF",
        "FlowNow":"FLW-000001"
    },
    {
        "DocNo":"100400020719-007",
        "NewDocNo":"ABS-02072019",
        "Plant":"VDNF",
        "FlowNow":"FLW-000001"
    }
]

Or like this

[
    {
        "100400020719-006",
        "ABS-02072019",
        "VDNF",
        "FLW-000001"
    },
    {
        "100400020719-007",
        "ABS-02072019",
        "VDNF",
        "FLW-000001"
    }
]

Thanks so much

Syed mohamed aladeen · Accepted Answer · 2019-07-03 05:12:23Z

1

You can just stringify your data and set it in hidden box. and you can parse and use wherever you want.

$(document).ready(function() {
    $("#btnConf").click(function(){
        var selected = [];
        $.each($("input[name='selected']:checked"), function () {
            selected.push({
              "DocNo": $(this).val(),
              "NewDocNo": $(this).attr("id"),
              "Plant": $(this).attr("plant"),
              "FlowNow": $(this).attr("flowno")
            });
            $("#arr").val(JSON.stringify(selected));
        });
        console.log(JSON.stringify(selected));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001">

<input type="checkbox" value="100400020719-007" name="selected" class="inforID" id="ABS-02072018" plant="VDND" flowno="FLW-000002">

<input type="hidden" id="arr" name="arr" />

<input type="button" value="get" id="btnConf"/>

edited Jul 3, 2019 at 5:12

answered Jul 3, 2019 at 5:04

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

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

3 Comments

Diao Vũ Over a year ago

thank you very much, I have tried this solution but not convert array to JSON.

Syed mohamed aladeen Over a year ago

I can't get you. are you saying you don't want to convert it to JSON?

Diao Vũ Over a year ago

I mean I have tried this solution before but not use JSON.stringify, so I didn't get the array

Azad · Accepted Answer · 2019-07-03 05:00:02Z

1

insert selected checkbox attribute values as JS objects into selected array

$(document).ready(function() {
  $("#btnConf").click(function() {
    var selected = [];
    $.each($("input[name='selected']:checked"), function() {
      selected.push({
        "DocNo": $(this).val(),
        "NewDocNo": $(this).attr("id"),
        "Plant": $(this).attr("plant"),
        "FlowNow": $(this).attr("flowno")
      });
      document.getElementById("arr").value = selected;
    });
    console.log(selected);
  });
});

answered Jul 3, 2019 at 5:00

Azad

5,2725 gold badges31 silver badges59 bronze badges

Comments

shrys · Accepted Answer · 2019-07-03 05:16:10Z

Push your information as an object into selected array. At the end of processing use JSON.stringify to change the object into string and store it in the hidden variable.

$(document).ready(function() {
  var selected = [];
  $("#btnConf").click(function() {
    selected = [];
    $.each($("input[name='selected']:checked"), function() {
      selected.push({
        DocNo: $(this).val(),
        NewDocNo: $(this).attr("id"),
        Plant: $(this).attr("plant"),
        FlowNow: $(this).attr("flowno")
      });
    });
    $("#arr").val(JSON.stringify(selected));
    console.log($("#arr").val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked="checked" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001">
<input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001">
<button id="btnConf">Configure</button>
<input type="hidden" id="arr" name="arr" />

Collectives™ on Stack Overflow

Insert attribute's value of checkboxes to array in javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related