获取在点击事件上创建的输入字段的值答案

【问题标题】：get the values of input fields created on on-click event获取在点击事件上创建的输入字段的值
【发布时间】：2014-08-08 06:22:44
【问题描述】：

我正在处理类似这样的表格fiddle
它创建了我所需要的动态表单字段。
现在我需要当用户在 on-change 事件中填写这些字段中的数据时，我想检索字段以总结所有字段值。
或者
每次用户填写或更改这些字段的值时，我都需要从这些字段值进一步计算。

var count = 0;
window.createinput = function(){
    field_area = document.getElementById('fields')
    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = 'field'+count;
    input.name = 'field'+count;
    input.size = "30";
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input);
    var input2 = document.createElement("input");
    input2.id = 'field2'+count;
    input2.name = 'field2'+count;
    input2.size = "10";
    input2.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input2);
    var input3 = document.createElement("input");
    input3.id = 'field3'+count;
    input3.name = 'field3'+count;
    input3.size = "20";
    input3.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input3);
    field_area.appendChild(li);
    //create the removal link
    var removalLink = document.createElement('a');
    removalLink.className = "remove";
    removalLink.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode)
    }
    var removalText = document.createTextNode('Remove Field Group');
    removalLink.appendChild(removalText);
    li.appendChild(removalLink);
    count++
}

【问题讨论】：

使用更改/输入事件来完成你的任务..！
你可以使用 JQuery，@Nothing 吗？
我正在使用 wordpress 任何东西都可以使用 dat 或者 jquery/js

标签： javascript jquery forms dynamic

【解决方案1】：

This

它有这个脚本（需要 jquery）：

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

    $("#addrow").on("click", function () {

        counter = $('#myTable tr').length - 2;

        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" name="name' + counter + '"/></td>';
        cols += '<td><input type="text" name="price' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
        newRow.append(cols);

        $("table.order-list").append(newRow);
        counter++;
    });

    $("table.order-list").on("change", 'input[name^="price"]', function (event) {
        calculateRow($(this).closest("tr"));
        calculateGrandTotal();                
    });


    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();

        counter -= 1

    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

fiddle 将回答您的问题.. 它添加和删除行。（可以改成表格）

更新：

此Fiddle 回答了 OP 对评论的请求。

【讨论】：

你太棒了，我会同意的，但首先我需要了解这是怎么回事，谢谢
嗨@Ejay，我将其修改为jsfiddle.net/2jsjw，但问题是当我删除行时，它不会减去值，你能帮我吗
this fiddle 已更新。问题是您将 total_weight 设置为全局。每次运行它都不会返回 0。
感谢您的更新，实际上我正在尝试获取每一行的价格和重量总和，例如：a= p1*w1;b=p2*w2; c=p3*w3.... 将计算每行的总重量就像 1st total=a;第二总=总+c或a+b+c
我已将其更新为jsfiddle.net/2jsjw/2，但仍然存在错误，您可以在这里帮助我

【解决方案2】：

<html>
<head>
<title> Dynamically create input fields- using jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
        var addDiv = $('#addinput');
        var i = $('#addinput p').size() + 1;        
        $('#addNew').live('click', function() {
                $('<p><input type="text"  size="40" name="fname' + i +'" value="" placeholder="enter the first name" /> &nbsp; <input type="text" size="40" name="lname' + i +'" value="" placeholder="enter the last name" /> &nbsp; <input type="text"  size="20" name="age' + i +'" value="" placeholder="enter the age" /><input type="button"  id="remNew" value="Remove"> </p>').appendTo(addDiv);
                i++;                
                return false;
        });

        $('#remNew').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        //i--;
                }
                return false;
        });
});

</script>

</head>
<body>
<h2>Dynammically Add New Input Box</h2>
<div id="addinput">
    <p>
    <input type="button" id="addNew" value="Add New fields">

    </p>
</div>

</body>
</html>

【讨论】：