title: How to retain input text field value into some memory at the time of ajax call
body: <p>I am working on dynamically updating the HTML table on clicking the drop-downs</p>
  
  <ul>
  <li>I have an drop-down with HTML table</li>
  <li>The drop-down having 10-15 options but here I am showing only 3 i.e <code>All</code>,<code>Cat1</code>,<code>Cat2</code> because of minimal code</li>
  <li>initially I am populating table for <code>All</code> categories </li>
  <li>Suppose user clicks on <code>Cat1</code> option and html table populates according to that my html table have an input field named as <code>Quantity</code> which has initial value as <code>0</code>.</li>
  <li>Now user input something into input field i.e <code>Quantity</code> and didn't click on save button, and clicks on <code>Cat2</code> now new html table populates for <code>Cat2</code> then user input something into there also, after typing some inputs their user goes back to <code>Cat1</code> option again, but now the input field value is refreshed and are <code>0</code> now, not the one user entered</li>
  </ul>
  
  <p>So my question is how can I store the values into some local memory or variable so that if user go back to the first drop-down data it should show what user have entered not <code>0</code>.</p>
  
  <p>What I have done till now </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tableData = [{
      "Item Code": "1001",
      "Item Name": "Beverages",
  
      "Quantity": ""
  
    },
    {
      "Item Code": "2003",
      "Item Name": "Juices",
  
      "Quantity": ""
    },
    {
      "Item Code": "1004",
      "Item Name": "Soups",
  
      "Quantity": ""
  
    },
    {
      "Item Code": "2005",
      "Item Name": "Cookies",
  
      "Quantity": ""
  
    },
  
  ]
  
  function addTable(tableData) {
    var col = Object.keys(tableData[0]);
    var countNum = col.filter(i =&gt; !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1); // TABLE ROW.
    for (var i = 0; i &lt; col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
      tr.classList.add("text-center");
      tr.classList.add("head")
    }
    for (var i = 0; i &lt; tableData.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j &lt; col.length; j++) {
        let tabCell = tr.insertCell(-1);
        var hiddenField = document.createElement("input");
        hiddenField.style.display = "none";
        var tabledata = tableData[i][col[j]];
  
        if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Item_Code');
          hiddenField.setAttribute('value', tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Item_Name');
          hiddenField.setAttribute('value', tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
          var quantityField = document.createElement("input");
          quantityField.style.border = "none";
          quantityField.style["text-align"] = "center";
          quantityField.setAttribute('name', 'Quantity');
          quantityField.setAttribute('value', tabledata);
          quantityField.setAttribute('type', 'number');
          quantityField.classList.add("dataReset");
          tabCell.appendChild(quantityField);
          /* console.log(quantityField) */
        }
        if (j &gt; 1)
          tabCell.classList.add("text-right");
      }
    }
    var divContainer = document.getElementById("HourlysalesSummary");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");
  }
  addTable(tableData);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;form action="InsertQuantityIndent" method="post" id="form1"&gt;
    &lt;div class="row position-relative"&gt;
  
      &lt;div class="col-lg-4"&gt;
        &lt;h5&gt;Category&lt;/h5&gt;
        &lt;select class="test" id="CategoryName" name="categoryCode"&gt;
          &lt;option&gt;All&lt;/option&gt;
          &lt;option&gt;Cat1&lt;/option&gt;
          &lt;option&gt;Cat1&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div class="table-responsive"&gt;
      &lt;table class=" w-100" id=HourlysalesSummary&gt;&lt;/table&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button type="submit" id="save"&gt;
       &lt;i class="fas fa-save"&gt;&lt;/i&gt; Save
      &lt;/button&gt;
  
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Above snippet is showing the initial output when page loads. After user click on other drop-down let say <code>Cat1</code> I am making an AJAX call on <code>onchange</code> event to cat data where category= selected category</p>
  
  <pre><code>$('#CategoryName').on('change', function() {
          var selectedOption =this.value;
            $.ajax({
                  async: true,
                  url : "ItemCategoryWiseFilter",
                  method : "POST",
                  data : {
                         categoryName :selectedOption,        
                       },                          
              });
            $.ajax({
                   async: true,
                  url : "ItemCategoryWiseFilter",
                  method : "GET",
                  dataType : "json",
                  contentType: "application/json; charset=utf-8",                                              
                  success : function(tableData) {                                                         
                        addTable(tabledata);
                      }
              }); 
  
          });
  </code></pre>
  
  <p>For more understanding, here is my back end code</p>
  
  <pre><code>    ResultSet resultSet = statement.executeQuery(sql);
  
          while (resultSet.next()) {
              lhm = new LinkedHashMap&lt;Object, Object&gt;();
              itemCode = resultSet.getString("itemcode");
              itemName = resultSet.getString("itemname");
              lhm.put("Item Code", itemCode);
              lhm.put("Item Name", itemName);
              lhm.put("Quantity", "0");
              mainList.add(lhm);
              str = gson.toJson(mainList);
  
          }
  </code></pre>
  
  <p>What is my approach:</p>
  
  <ul>
  <li>I think of making ajax call and send the input field data to server then on next ajax call when user change or goes back to same drop-down should call that data</li>
  <li>But initially table is showing for all category and after that user clicks on <code>Cat1</code> it shows <code>Cat1</code> data and for first time the quantity should be <code>0</code> after that user will edit and go to other drop-down</li>
  <li>My issue is how can I send data back to server what user has input at <code>Cat1</code> category and show the same data when user comes back to <code>Cat1</code> again.</li>
  </ul>