獲取在jQuery中使用DOM創建的輸入值陣列

我這里有這個表格

我想阻止只要輸入值不等于100就提交表單，換句話說，要完成并保存，所有輸入的值必須等于100

鑒于輸入是由 DOM 創建的，如何執行此操作，如下圖所示：

url: '/getProjectStandards/'   standid,
        type: "get",
        async: true,
        dataType: "json",
        success: function (data2) {
            console.log(data2);
            $.each(data2, function (key, value) {
                $('#inner_sugg').append('<div >'  
                    '<div >'  
                    '<p >'   value['stand_name']   '</p>'  
                    '</div>'  
                    '<div >'  
                    '<input type="hidden"  name="stand_id[]" value="'   value['id']   '">'  
                    '<input type="number" min="0"  name="sugg_weight[]" required">'  
                    '</div>'  
                    '</div>'
                );

            });

});

如何在提交時獲取所有輸入值并驗證它們是否等于 100？

uj5u.com熱心網友回復：

• 修正你的name價值觀。
  應該name="sugg_weight[]"，不是name="sugg_weight[] required"
• 通過.on() 方法使用事件委托 $staticParent.on("eventname", "dynamicChild", fn)
• 僅$staticParent.on("eventname", fn)考慮事件傳播（意味著可以通知靜態父級從任何靜態或動態子元素傳播的任何事件）。
• 使用Array.prototype.reduce將動態輸入的值減少為數字

const $innerSugg = $("#inner_sugg");

const toggleSuggSubmit = () => {
  const $inputs = $("[name='sugg_weight[]']", $innerSugg);
  const $submit = $("[type='submit']", $innerSugg);
  
  const total = $inputs.get().reduce((tot, el) => tot  = parseFloat(el.value??0), 0);
  $submit.prop({disabled: total !== 100});
};

$innerSugg.on("input", "[name='sugg_weight[]']", toggleSuggSubmit);

// Just to fake "AJAX generated" inputs at a later time...
$innerSugg.prepend(`
  <input type="number" name="sugg_weight[]" required>
  <input type="number" name="sugg_weight[]" required>
  <input type="number" name="sugg_weight[]" required>
`);

<form id="inner_sugg">
  = 100 <button type="submit" disabled>SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

或者您也可以簡單地$innerSugg.on("input", toggleSubmit);利用事件傳播。

const $innerSugg = $("#inner_sugg");

const toggleSuggSubmit = () => {
  const $inputs = $("[name='sugg_weight[]']", $innerSugg);
  const $submit = $("[type='submit']", $innerSugg);
  
  const total = $inputs.get().reduce((tot, el) => tot  = parseFloat(el.value??0), 0);
  $submit.prop({disabled: total !== 100});
};

$innerSugg.on("input", toggleSuggSubmit);

// Just to fake "AJAX generated" inputs at a later time...
$innerSugg.prepend(`
  <input type="number" name="sugg_weight[]" required>
  <input type="number" name="sugg_weight[]" required>
  <input type="number" name="sugg_weight[]" required>
`);

<form id="inner_sugg">
   = 100 <button type="submit" disabled>SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

uj5u.com熱心網友回復：

function canISave() {
  const inputs = document.querySelectorAll("input[name='sugg_weight[]']");

  let total = 0;

  inputs.forEach((i) => total  = (parseInt(i.value) || 0));

  // console.log(total);

  document.querySelector('#submit').disabled = total !== 100;
}

input {
  display: block;
}

<input type="number" name="sugg_weight[]" oninput="canISave()" />
<input type="number" name="sugg_weight[]" oninput="canISave()" />
<input type="number" name="sugg_weight[]" oninput="canISave()" />
<br>
<input id="submit" type="submit" disabled />

標籤：javascript jQuery 数组 拉拉维尔 dom

上一篇：document.getElementById的行為不符合預期

下一篇：ExtJS拋出InvaliddomNodereferenceoranidofanexistingdomNode:null當試圖將一個元素系結到另一個元素的配置時