Question

所以我有多个表数据插入，我想在某个字段上获取输入值，以便可以在另一个字段上进行计算。如果这是一个数组字段，该怎么办？

我尝试使用javascript，但仅在第一个字段（而不是数组字段）上工作。

const wordsArray = ["why", "would", "you", "pay", "for", "a", "phone", "?"];

const binned = wordsArray.reduce((result, word) => {
  // get the first letter. (this assumes no empty words in the list)
  const letter = word[0];
  
  // ensure the result has an entry for this letter
  result[letter] = result[letter] || [];
  
  // add the word to the letter index
  result[letter].push(word);
  
  // return the updated result
  return result;
}, {})

console.log(binned);

function tot() {
    var txtFirstNumberValue = document.getElementById('price').value;
    var txtSecondNumberValue = document.getElementById('qty').value;
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        document.getElementById('total').value = result;
    }
}

$(document).ready(function(){
    $("#btn-add-form").click(function(){
        var addi = parseInt($("#addi-form").val());
        var nextform = addi + 1;
        $("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
            "<input type='text' name='names[]' required>"
            "<input id='price' type='text' name='price[]' onkeyup='tot();' required>"
            "<input id='qty' type='text' name='qty[]' onkeyup='tot();' required>"
            "<input type='text' name='total[]' required>"
        $("#addi-form").val(nextform);
    });
    $("#btn-reset-form").click(function(){
        $("#insert-form").html("");
        $("#addi-form").val("1");
    });
});

我希望这种方式适用于添加的数组表，但不是，它只会影响我的第一个表上的字段。

Answer 1

您不能将同一ID分配给同一页面上的多个DOM元素。我已经对您的代码进行了一些更新，以将商品编号与ID一起使用。就像，对于项目1 ID是price，对于项目2 ID是price-2，对于项目3 ID是price-3，依此类推。与qty和total相同。

您可以尝试以下代码：

function sum_total() {
    var totalSum = 0;
    var calcTotalSum = document.getElementsByClassName("calc-total");
    var totalItems = calcTotalSum.length;
    var i = 0;
    while(i < totalItems) {
        if (calcTotalSum[i].value !== "") {
            totalSum = totalSum + parseInt(calcTotalSum[i].value);
        }
        i += 1;
    }
    if(totalSum > 0) {
        console.log("Total Sum is: ", totalSum);
    }
}

function tot(event) {
    var itemNo = event.target.getAttribute("data-item");
    var txtFirstNumberValue = "";
    var txtSecondNumberValue = "";    
    if (itemNo) {
        txtFirstNumberValue = document.getElementById('price-' + itemNo).value;
        txtSecondNumberValue = document.getElementById('qty-' + itemNo).value;        
    } else {
        txtFirstNumberValue = document.getElementById('price').value;
        txtSecondNumberValue = document.getElementById('qty').value;
    }
    
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        if (itemNo) {
            document.getElementById('total-' + itemNo).value = result;
        } else {
            document.getElementById('total').value = result;
        }
    }
    
    sum_total();
}

$(document).ready(function(){
    $("#btn-add-form").click(function(){
        var addi = parseInt($("#addi-form").val());
        var nextform = addi + 1;
        $("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
            "<input type='text' name='names[]' required>" +
            "<input id='price-" + nextform + "' data-item='" + nextform + "' type='text' name='price[]' onkeyup='tot(event);' required>" +
            "<input id='qty-" + nextform + "' data-item='" + nextform + "' type='text' name='qty[]' onkeyup='tot(event);' required>" +
            "<input id='total-" + nextform + "' class='calc-total' type='text' name='total[]' required>"
        );
        $("#addi-form").val(nextform);
    });
    $("#btn-reset-form").click(function(){
        $("#insert-form").html("");
        $("#addi-form").val("1");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br>
<input type="hidden" name="addi-form" id="addi-form" value=1 required>
<input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot(event);" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot(event);" required>
<input id="total" class="calc-total" type="text" name="total[]" required>
<div id="insert-form"></div>

希望，对您有帮助。

已编辑：sum_total函数用于计算总金额。

Answer 2

我假设您想在新添加的表行上触发'url' => (new \App\Sources\Meli($someClientId, $someClientSecret))->getAuthUrl(env('ML_AUTHENTICATION_URL', '')),函数。为此，您需要：

调用tot()函数以绑定到新添加的元素tot()之后。或使用jQuery bind方法。
使用 .class 代替元素上的 #id 属性，以便您可以使用类选择器遍历所有元素
< / li>

如何在输入字段上获取数组值

2 个答案: