动态添加输入字段值 jQuery

帕维斯·艾哈迈德

html代码我们可以得到值

<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />

我可以在 jQuery 中尝试这个我只能得到 html 值结果,添加新行后我无法得到值

 $(document).ready(function () {

var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item1</td>';
    cols += '<td><input type="text" class="form-control" name="value1[]"        id="value2' + counter + '"></td>';
    cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
    cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="total_"' + counter + '"></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});
    $("#value2").keyup(function () {
        var value1 = $("#value1").val();
        var value2 = $("#value2").val();
        var totalincome = parseInt(value1) + parseInt(value2);
        //alert(totalincome);
        $("#total").val(totalincome);
    })
  });
扎卡里亚·阿查基

首先,id 在同一个文档中必须是唯一的,否则你最终会得到不正确的 HTML 代码,所以作为第一步,你需要在代码中用公共类替换 id。

然后您需要使用事件委托将事件附加到您的输入,因为它们必须是使用 JS 代码动态创建的。

我更喜欢使用input事件而不是keyup跟踪用户输入时,因此事件将类似于:

$(document).ready(function() {
  var counter = 1;

  $("body").on("input", ".calculated_value", function() {
    var parent_row = $(this).closest('tr');
    var totalincome = 0;

    parent_row.find('.calculated_value').each(function() {
      totalincome += parseInt($(this).val() || 0);
    });

    parent_row.find(".total").val(totalincome);
  });

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>Item ' + counter + '</td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
    cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
  <tr>
    <td>Item </td>
    <td><input type="text" class="form-control calculated_value" name="value1[]"></td>
    <td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
    <td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
  </tr>
</table>
<button id="addrow">Add row</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery读取动态输入字段的值

jQuery对照其他动态添加的输入字段验证动态添加的输入字段

jQuery没有得到动态添加的输入字段ID

如何使用jQuery动态添加/删除文件类型输入字段?

无法为动态生成的输入字段添加jQuery验证?

使用jQuery更改动态创建的输入字段的值

Angular:从输入字段中获取与jquery动态绑定的值

从具有动态ID的输入字段获取jquery内的值

jQuery动态输入值

在动态添加的 jQuery 自动完成输入字段中更改任何输入字段时,所有输入字段都会更改

如何设置动态添加输入的名称值?javascript jquery

php / jQuery-formvalidation,获取动态添加输入的值

验证动态输入字段 Jquery

使用jQuery根据所选值添加输入字段

基于使用jquery添加或删除div更新输入字段值

如何使用Jquery获得添加的输入字段的值?

用jQuery动态添加字段

jQuery循环添加输入字段

JQuery 访问输入字段值

如何使用jQuery获取动态添加的输入框的输入值

动态将无线电输入添加到jQuery Mobile字段集控件组

jQuery验证插件.rules()无法与动态添加的输入字段一起正常工作

动态添加其他文本输入字段后,jQuery自动完成失败

PHP的jQuery自动完成与动态输入字段?

jQuery无法用于动态创建的输入字段

jQuery验证添加动态所需的输入

PHP和JQuery添加动态输入

使用Jquery在动态输入中添加值

编辑动态添加的输入字段的值