Как добавить события onChange в список элементов, которые будут обновлять HTML с текущими значениями? - PullRequest
Новая
       13

Как добавить события onChange в список элементов, которые будут обновлять HTML с текущими значениями?

0 голосов
/ 26 апреля 2019

Я хочу (конечно, программно) добавить прослушиватель событий в список (массив объектов) полей ввода HTML, который вызовет событие изменения, но предоставит значение, которое в настоящий момент находится на входе, а не то, что было в В полях ввода в тот момент запускается функция, которая выполняет добавление событий.

После попытки ввода полей ввода как можно позже, я по-прежнему получаю значения формы по умолчанию, а не возвращаемые текущие значения. По крайней мере, к предполагаемым полям ввода действительно подключен слушатель события изменения, так что я на полпути ...>.> 

// only sets events with values at time of execution!
function setEvents() {
    let fieldList = [{"fld": "saleDate","type": "date"},{"fld": "pickupDate","type": "date"},{"fld": "deposit","type": "cash"}];

    for(let pair of fieldList) {
        $('#' + pair['fld']).bind('change',
            {k: pair['fld'], v: $('#' + pair['fld']).val(), t: pair['type']},
            function (event) {
                let tKey = "", tVal = "", tDate = new Date();
                switch (event.data.t) {
                    case "date":
                        tKey = event.data.k;
                        tDate = new Date(event.data.v);
                        tVal = tDate.toLocaleDateString('en-GB');
                        break;
                    default:
                        tKey = event.data.k;
                        tVal = event.data.v;
                }
                addItem(tKey, tVal);
            });
    }
}

// this function works but is HEAVILY trimmed so you can see what I'm doing with the variables
function addItem (key, val) {
    var tmpItem = document.createElement("LI");
    var tmpNode = document.createTextNode(key.toUpperCase() + ": " + val);
    tmpItem.appendChild(tmpNode);
    tmpItem.setAttribute("name", key);
    getElementById("summaryList").box.appendChild(tmpItem);
}

Как сказано выше, событие изменения добавляется к элементам, как и ожидалось. У меня есть предупреждения, которые говорят мне, что одно и то же значение передается с каждым триггером события. ака значения по умолчанию формы.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Я не сделал этого достаточно поздно !!!

Я знал, что у меня должен быть код, который добавляет событие, в местоположение, которое получает текущее значение из элементов формы, как здесь; 

function setEvents() {
    let fieldList = [
        {
            "fld": "saleDate",
            "type": "date"
        },
        {
            "fld": "pickupDate",
            "type": "date"
        },
        {
            "fld": "deposit",
            "type": "cash"
        }
    ],
    tKey = "", tVal = "", tDate = new Date();

    // begin loop through JSON of elements
    for(let pair of fieldList) {
        // add change event listener but don't get element value yet!
        $('#' + pair['fld']).bind('change',
            {k: pair['fld'], t: pair['type']},
            function (event) {
                // in here is where I should get current form values!
                let tKey = "", tVal = "", tDate = new Date();

                switch (event.data.t) {
                    case "date":
                        tKey = event.data.k;
                        // this grabs fresh data from the form!
                        tDate = new Date($('#' + event.data.k).val());
                        tVal = tDate.toLocaleDateString('en-GB');

                        break;
                    default:
                        tKey = event.data.k;
                        // and so does this!!
                        tVal = $('#' + event.data.k).val();
                }

                updateSummary(tKey, tVal);
            });
    }
}

Спасибо за свежую пару глаз!

0 голосов
/ 26 апреля 2019

Получить значение в функции прослушивателя событий, а не при привязке.

В прослушивателе событий this является целью события, а this.value является значением элемента. 

for (let pair of fieldList) {
  $('#' + pair['fld']).on('change', {
      k: pair['fld'],
      t: pair['type']
    },
    function(event) {
      let tKey = "",
        tVal = "",
        tDate = new Date();
      switch (event.data.t) {
        case "date":
          tKey = event.data.k;
          tDate = new Date(this.value);
          tVal = tDate.toLocaleDateString('en-GB');
          break;
        default:
          tKey = event.data.k;
          tVal = this.value;
      }
      addItem(tKey, tVal);
    });
}
...