Извлечение уникального идентификатора элемента с помощью Javascript

Question

Итак, у меня есть форма, которая добавляет элемент в список элементов и выполняет с ним вычисления, но каждый добавленный новый элемент выполняется на стороне пользователя, прежде чем отправляться на сервер для проверка и обновление базы данных. Теперь я просмотрел другие ответы и не смог получить ответ. Если пользователь добавляет новый элемент и вводит количество и скорость, он должен автоматически рассчитывать сумму, как можно извлечь уникальный идентификатор идентификатора, чтобы изменить значение суммы? Код ниже и в этом случае уникальный идентификатор - 19786868. Длина этого идентификатора всегда различна, а их нет уникального шаблона, длина и значение генерируются случайной командой.

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /> 
<input class="form-control" type="text" id="list_item_attributes_19786868_rate" /> 
<input class="form-control" type="text" id="list_item_attributes_19786868_amount" /> 

Как извлечь этот уникальный идентификатор с помощью команды OnChange в JavaScript для вычисления значения суммы?

Answer 1

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" onchange="extractId(event);"/> 

И в JavaScript:

function extractId(event) { 
var elem = event.target; 
var myArr = elem.id.split('_'); 

var yourUnique_id = myArr[3]; 
} 

Answer 2

[].forEach.call(document.querySelectorAll(".form-control"), function(el) { 

    var id = el.id.replace(/\D+/g,""); 
    console.log(id);  // "19786868" 

}); 

поэтому в основном использовать this.id.replace(/\D+/g,""), где все не Digit \D заменяется на ""

Вот пример использования input событие:

[].forEach.call(document.querySelectorAll(".form-control"), function(el) { 
 

 
    el.addEventListener("input", function() { 
 
    var id = this.id.replace(/\D+/g,""); 
 
    alert(id); 
 
    }, false) 
 

 
});

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /> 
 
<input class="form-control" type="text" id="list_item_attributes_123_foobar" />

_{Примите к сведению, что: asd_123_foo_9 вернет 1239 как результат, так убедитесь, что всегда есть asd_123_foo, как ID значение}

Answer 3

Если пользователь добавляет новый элемент и введите количество и ставка должна быть рассчитывать сумму автоматически, как извлечь один уникальный идентификатор , чтобы изменить значение o f сумма?

Вы можете использовать событие input; for петля; атрибут содержит селектор [attributeName*=containsString], .nextElementSibling, .previousElementSibling, суммировать значения id, содержащие "quantity" и id, содержащий "rate" и установить результат на id содержащий "amount"

function calculate() { 
 
    this.parentElement.querySelector("[id*=amount]") 
 
    .value = +this.value 
 
     + +(/quantity/.test(this.id) 
 
      ? this.nextElementSibling 
 
      : this.previousElementSibling 
 
     ).value 
 
} 
 

 
var elems = document.querySelectorAll("[id*=quantity], [id*=rate]"); 
 
for (var i = 0; i < elems.length; i++) { 
 
    calculate.call(elems[i]); elems[i].oninput = calculate; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" value="1" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_rate" value="2" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /> 
 
</div> 
 
<div> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_quantity" value="3" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_rate" value="4" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786867_amount" /> 
 
</div>

Answer 4

Для того, чтобы иметь возможность реагировать на вновь добавленных элементов управления вводом , вам нужно зафиксировать событие change в каком-либо родительском элементе, иначе вы не поймаете это изменение на вновь добавленные элементы.

Ниже приведен код, который обрабатывает событие изменения документа.Как это событие всплывает вверх, он будет в конечном итоге получить там, так что мы можем ответить на него:

Для извлечения числа из И.Д. входного, мы можем использовать регулярное выражение:

document.onchange = function(e) { 
 
    var match = e.target.id.match(/^(list_item_attributes_.*?_)(rate|quantity)$/); 
 
    if (!match) return; // not rate or quantity 
 
    // read rate and quantity for same ID number: 
 
    var rate = +document.querySelector('#' + match[1] + 'rate').value; 
 
    var quantity = +document.querySelector('#' + match[1] + 'quantity').value; 
 
    // write product as amount: 
 
    document.querySelector('#' + match[1] + 'amount').value = rate*quantity; 
 
}

Quantity: <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /><br> 
 
Rate: <input class="form-control" type="text" id="list_item_attributes_19786868_rate" /><br> 
 
Amount: <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /><br> 
 
<p> 
 
Quantity: <input class="form-control" type="text" id="list_item_attributes_14981684_quantity" /><br> 
 
Rate: <input class="form-control" type="text" id="list_item_attributes_14981684_rate" /><br> 
 
Amount: <input class="form-control" type="text" id="list_item_attributes_14981684_amount" /><br>

Как вы просили ответить на событие change, я сохранил его таким образом, но вам может быть интересно использовать событие input, которое будет запускаться, как только любой символ изменится на входе.

Вышеприведенный образец не защищает поля amount от ввода. Вероятно, вы должны что-то сделать, потому что пользователи могли просто перезаписать рассчитанный результат.

Answer 5

document.querySelector(".my-form").addEventListener("change", function(e) { 
 

 
    var changed = e.target; 
 
    var matchedId = changed.id.match(/^(list_item_attributes_[^_]*)_/); 
 
    if (!matchedId) { 
 
    // this isn't one of the relevant fields 
 
    return; 
 
    } 
 
    var uniquePrefix = matchedId[1]; 
 
    var quantity = document.querySelector("#" + uniquePrefix + "_quantity"); 
 
    var rate = document.querySelector("#" + uniquePrefix + "_rate"); 
 
    var amount = document.querySelector("#" + uniquePrefix + "_amount"); 
 
    var newVal = quantity.value * rate.value; 
 
    if (isNaN(quantity.value) || isNaN(rate.value) || isNaN(newVal)) { 
 

 
    amount.value = ""; 
 

 
    } else { 
 

 
    amount.value = newVal; 
 

 
    } 
 

 
});

<form class="my-form"> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_rate" /> 
 
    <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /> 
 
</form>