storage of dynamic input fields as array of objects

Question

I'm new with jquery

I have made a program code to dynamically create input fields on button click and after which the input fields that are produced must have unique ids

The problem I'm facing is I am not able to store these input values as array of objects

Been working around this problem,but not able to resolve it

Here is my jsFiddle link,

https://jsfiddle.net/dx4681cb/6/

var a = 0;
var fieldFilter;
var fieldType;
var fieldValue;
var dataStored = [];
var valueStored = [];
$("#addInput").on("click", function() {
  a += 1;
  fieldFilter = `#filter-field${a}`;
  fieldType = `#filter-type${a}`;
  fieldValue = `#filter-value${a}`;
  $("#inputAdder").append(
    `<div class = "row" id="appender${a}">
     <div class="col-md-4 padderSpace">
       <select id = "filter-field${a}">
         <option value="name">Name</option>
         <option value="password">Password</option>
         <option value="username">Username</option>
         <option value="age">Age</option>
         <option value="gender">Gender</option>
       </select>
     </div>
     <div class="col-md-4 padderSpace">
       <select id = "filter-type${a}">
         <option value="=">=</option>
         <option value="<"><</option>
         <option value="<="><=</option>
         <option value=">">></option>
         <option value=">=">>=</option>
         <option value="!=">!=</option>
         <option value="like">like</option>
       </select>
     </div>
     <div class="col-md-4 padderSpace">
       <input id="filter-value${a}">
     </div>
   </div>`
  )
  dataStored.push({
    field: fieldFilter,
    type: fieldType,
    value: fieldValue
  });
  console.log(dataStored)
})
$("#inputAdder").on("change", fieldFilter, fieldType, changeFunc);
$("#inputAdder").on("keyup", fieldValue, changeFunc);

function changeFunc() {
  for (let i = 0; i <= dataStored.length; i++) {
    valueStored.push({
      field: $(dataStored[i].field).val(),
      type: $(dataStored[i].type).val(),
      value: $(dataStored[i].value).val()
    })
    console.log("Stored Values", valueStored);
  }
}

.padderSpace {
  padding-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button type="button" class="btn btn-primary" id="addInput">Add Input Fields</button>

<div id="inputAdder">

</div>

I need to store them so that I can filter datas in tabulator — Yasik raam
– Yasik raam, Commented Jun 23, 2021 at 6:29
I think you need to remove the = in i <= dataStored.length — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jun 23, 2021 at 6:31

mplungjan · Accepted Answer · 2021-06-23 06:36:13Z

First I would remove the = from <= in for (let i = 0; i <= dataStored.length; i++).

Also you should empty the valueStored each time you call changeFunc

function changeFunc() {
  valueStored = [];
  for (let i = 0; i < dataStored.length; i++) {

    valueStored.push({
      field: $(dataStored[i].field).val(),
      type: $(dataStored[i].type).val(),
      value: $(dataStored[i].value).val()
    })

    console.log("Stored Values", valueStored);
  }

}

Demo

var a = 0;
var fieldFilter;
var fieldType;
var fieldValue;

var dataStored = [];
var valueStored = [];

$("#addInput").on("click", function() {

  a += 1;

  fieldFilter = `#filter-field${a}`;
  fieldType = `#filter-type${a}`;
  fieldValue = `#filter-value${a}`;

  $("#inputAdder").append(

    `<div class = "row" id="appender${a}">
    
    <div class="col-md-4 padderSpace">
                    <select id = "filter-field${a}">
                        <option value="name">Name</option>
                        <option value="password">Password</option>
                        <option value="username">Username</option>
                        <option value="age">Age</option>
                        <option value="gender">Gender</option>
                      </select>
                </div>
                
    <div class="col-md-4 padderSpace">
                    <select id = "filter-type${a}">
                        <option value="=">=</option>
                        <option value="<"><</option>
                        <option value="<="><=</option>
                        <option value=">">></option>
                        <option value=">=">>=</option>
                        <option value="!=">!=</option>
                        <option value="like">like</option>
                      </select>
                </div>
                
    <div class="col-md-4 padderSpace">
                    <input id="filter-value${a}">
                </div>
                
    </div>`
  )

  dataStored.push({
    field: fieldFilter,
    type: fieldType,
    value: fieldValue
  });
  console.log(dataStored)

})



$("#inputAdder").on("change", fieldFilter, fieldType, changeFunc);
$("#inputAdder").on("keyup", fieldValue, changeFunc);

function changeFunc() {
  valueStored = [];
  for (let i = 0; i < dataStored.length; i++) {

    valueStored.push({
      field: $(dataStored[i].field).val(),
      type: $(dataStored[i].type).val(),
      value: $(dataStored[i].value).val()
    })
    console.clear();
    console.log("Stored Values", valueStored);
  }

}

.padderSpace {
  padding-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button type="button" class="btn btn-primary" id="addInput">Add Input Fields</button>

<div id="inputAdder">

</div>

Thanks a lot,it works but is it possible to remove an object in array on button click?

Collectives™ on Stack Overflow

storage of dynamic input fields as array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related