Unable to push to id to JavaScript array along with values

Question

I have written code to create a dynamic array to loop through all controls inside a div and frame an array, not sure what is wrong but unable to push id to array. When I log it to console I can see the Id

$('#btnClick').click(function() {
  saveDiv($("#div1"))
});

function saveDiv(div) {
  var controlValues = [];
  div.find('input:text, input:password, input:file, select, textarea')
    .each(function() {
      //console.log($(this).attr("id"));
      var id = $(this).attr("id");
      var quote_str = "'" + id + "'";
      console.log(id);
      controlValues.push({
        quote_str: $(this).val()
      });
      console.log(controlValues);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    <div class="row g-3">
      <div class="col-sm-6">
        <label for="vesselname" class="form-label">Vessel Name</label>
        <input type="text" class="form-control" id="vesselname" placeholder="Enter Vessel Name" value="">
      </div><br />
      <div class="col-sm-6">
        <label for="vesseltype" class="form-label">Vessel Type</label>
        <select class="form-select" id="vesseltype">
          <option>--Select--</option>
          <option>Test</option>
        </select>
      </div><br />
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="" id="formCheck5">
        <label class="form-check-label" for="formCheck5">Material Damage</label>
      </div>
      <br>
      <button id="btnClick">Click me</button>
    </div>
  </div>
</div>

Instead of Id I am always getting the id as quote_str

Add id: id inside controlValues.push({ , it will push id as well. — Karan
– Karan, Commented Sep 21, 2021 at 12:40
In my eyes the title of your question is confusing. As far as I can understand your code, you want to add an object to an array. — Reporter
– Reporter, Commented Sep 21, 2021 at 13:28

Tushar Gupta · Accepted Answer · 2021-09-21 13:14:06Z

1

Update: Based on OP's comment, you want to have the dynamic key as id variable, which you can do by putting the var inside square brackets as [id]

controlValues.push({
  [id]: $(this).val(),
});

WORKING CODE BELOW

$('#btnClick').click(function() {
  saveDiv($("#div1"))
});

function saveDiv(div) {
  var controlValues = [];
  div.find('input:text, input:password, input:file, select, textarea')
    .each(function() {
      //console.log($(this).attr("id"));
      var id = $(this).attr("id");
      var quote_str = "'" + id + "'";
      console.log(id);
      controlValues.push({
        [id]: $(this).val(),
      });
      console.log(controlValues);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    <div class="row g-3">
      <div class="col-sm-6">
        <label for="vesselname" class="form-label">Vessel Name</label>
        <input type="text" class="form-control" id="vesselname" placeholder="Enter Vessel Name" value="">
      </div><br />
      <div class="col-sm-6">
        <label for="vesseltype" class="form-label">Vessel Type</label>
        <select class="form-select" id="vesseltype">
          <option>--Select--</option>
          <option>Test</option>
        </select>
      </div><br />
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="" id="formCheck5">
        <label class="form-check-label" for="formCheck5">Material Damage</label>
      </div>
      <br>
      <button id="btnClick">Click me</button>
    </div>
  </div>
</div>

edited Sep 21, 2021 at 13:14

answered Sep 21, 2021 at 12:42

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

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

5 Comments

Developer Over a year ago

My code is as follows by hard coding vesselDataArray = [{ "VesselName": $('#vesselname').val(), "vesseltype": $('#imono').val() }]; I am trying to do this like passind id in place of vesselname and value in place of val

Tushar Gupta Over a year ago

what is #imono ?

Developer Over a year ago

Just a dummy array I passed as per code

Tushar Gupta Over a year ago

Can you check the answer now? Let. me know what edits you want

Developer Over a year ago

Thanks will test and let you know

Collectives™ on Stack Overflow

Unable to push to id to JavaScript array along with values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related