CODEWITHSUNDEEP
javascripthtmljquery
Yasik raam
Yasik raam

Reputation: 61

storage of dynamic input fields as array of objects

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>

Upvotes: 0

Views: 897

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 1

Related Questions