Bootstrap AutoNumeric Multiple -使用TextBox追加行单击“添加”按钮

0yycz8jy  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(1)|浏览(103)

我有一个问题与http://autonumeric.org/插件.当点击添加按钮时,它会附加一行一些输入字段。这些字段是整数和十进制字段。一旦行附加了它,那么它将初始化具有多个字段的自动数字。追加了多行文本字段,然后得到与输入字段的问题。

- inputting the value, it's showing multiple textboxes and inputted value showing
 - inputted 5 at third textbox: showing as 555

    <div class='container'>
  <div class='row mt-4'>
    <div class='col-12'>
      <h3>AutoNumeric Append Text Box with AutoNumeric</h3>
    </div>
    <div class='col-12 pl-4'>
      <button type='button' class='btn btn-danger' onclick='doAppendRow()'>Add</button>
    </div>
    <div class='col-12' id='dvappend'></div>
  </div>
</div>```

    ```var row = 1;
const autoNumericOptions = {
  allowDecimalPadding: "floats",
  decimalCharacter: ",",
  digitGroupSeparator: "",
  emptyInputBehavior: "zero",
  decimalPlaces: 2
  // watchExternalChanges: true //!!!
};
function doAppendRow() {
  var output =
    "<div class='row' id='row_" +
    row +
    "'><div class='col-12'><div class='form-group'><label>Qty</label><input type='text' name='txtqty[]' class='form-control' /></div><div class='form-group'><label>Amount</label><input type='text' name='txtamount[]' class='form-control' /></div></div></div>";

  $("#dvappend").append(output);
  new AutoNumeric.multiple("input[name^=txtqty]", autoNumericOptions);
  new AutoNumeric.multiple("input[name^=txtamount]", autoNumericOptions);
  row++;
}


Please help!

CodePen链接:https://codepen.io/muruganrsm/pen/eYVqqZY

pftdvrlh

pftdvrlh1#

Autonumeric不能多次初始化同一个DOM元素。
要解决这个问题,必须动态添加id输入:

<input type='text' name='txtamount[]' class='form-control' id='rows_" + row+"'/>

然后,创建示例:

new AutoNumeric("#rows_"+row, autoNumericOptions);

相关问题