My autoincrement value is not working with my appended textbox

Viewed 48

my autoincrement is not working on my appended textbox.

My target is to have an auto-increment in my appended textbox. I have tried several ways and one of my way is:

var count = 1; then an input type value='"+ count +"'

But it is still not working. Is there anything i missed? Thank you in advance

This is a screenshot of my work:

enter image description here

html:

<div id="result"> </div>

script:

let ajaxResult = []; // the pushed data will be saved here
let save_method;
let table;
let base_url = "<?php echo base_url();?>";
let result = [];
var html = "";

function removeDuplicates(result) {
  return Object.values(result.reduce((acc, curr) => {
    acc[curr.player] = acc[curr.player] || curr;
    return acc;
  }, {}))
}

const combine = (source) => {
  return source.reduce((acc, curr) => {
    if (acc[curr.weight]) {
      const levelArr = acc[curr.weight];
      const last = levelArr[levelArr.length - 1];
      if (last.length === 2) {
        levelArr.push([curr])
      } else {
        last.push(curr)
      }
    } else {
      acc[curr.weight] = [
        [curr]
      ];
    }
    return acc;
  }, {})
};

const uniquePlayers = removeDuplicates(result);
$(document).ready(function () {
  var eventID = $('#eventsssiud').val();
  //datatables
  table = $("#entry_list1").DataTable({
    processing: false,
    serverSide: true,
    order: [],
    searching: false,
    paging: false,
    info: false,
    ajax: {
      url: "<?php echo site_url('entry/ajax_list')?>",
      type: "POST",
      async: true,
      dataType: "json",
      data: { eventID: eventID },
      success: function (data) {
        result = combine(removeDuplicates(data.data2));
        console.log(result);
        var keys = Object.keys(result)
        for (var i = 0; i < keys.length; i++) {
          result[keys[i]].forEach(function (val) {
            var length_ = val.length;
            val.forEach(function (value, index) {
              var idaa = value.eventID;
              var count = 1;
              if (idaa == eventID) {
                if (length_ == 2) {
                  var entryIDs = index == 0 ? "entryIDM[]" : "entryIDW[]"
                  var players = index == 0 ? "playerM[]" : "playerW[]"
                  var weights = index == 0 ? "weightM[]" : "weightW[]"
                  var lightBands = index == 0 ? "lightBandM[]" : "lightBandW[]"
                  html += `<input type="text" name="${entryIDs}" value="${value.entryID}"> 
                     <input type="text" name="${players}" value="${value.player}">
                     <input type="text" name="${weights}" value="${value.weight}">
                     <input type="text" name="${lightBands}" value="${value.lightBand}">
                     <input type="text" name="eventID" value="${value.eventID}">
                     <input type="text" class="something" name="something" value='"+ count + "' name='photo_" + (count++) +"'> // The autoincrement does not work here.`
                }
              }
            })
          })
        }
        document.getElementById("result").innerHTML = html //add html to div
      },
    },

    "columnDefs": [{
        "targets": [0], //first column
        "orderable": false, //set not orderable
      },
      {
        "targets": [-1], //last column
        "orderable": false, //set not orderable
      },
    ],
  });
});
1 Answers

You used + inside a template string which won't work the way you expected, instead use ${}.

html += `<input type="text" name="${entryIDs}" value="${value.entryID}"> 
                     <input type="text" name="${players}" value="${value.player}">
                     <input type="text" name="${weights}" value="${value.weight}">
                     <input type="text" name="${lightBands}" value="${value.lightBand}">
                     <input type="text" name="eventID" value="${value.eventID}">
                     <input type="text" class="something" name="something" value="${count}" name="photo_${count++}">`
Related