Javascript 获取在单击事件上创建的输入字段的值_Javascript_Jquery_Forms_Dynamic

Javascript 获取在单击事件上创建的输入字段的值

javascript jquery forms dynamic

Javascript 获取在单击事件上创建的输入字段的值,javascript,jquery,forms,dynamic,Javascript,Jquery,Forms,Dynamic,我正在制作类似的表格，如下所示它创建的动态表单字段正是我所需要的。现在我需要的是，当用户在更改事件中填写这些字段中的数据时，我要检索字段的个数，以汇总所有字段的值。或每次用户填写或更改这些字段的值时，我需要进一步计算这些字段的值 var count = 0; window.createinput = function(){ field_area = document.getElementById('fields') var li = document.createElem

我正在制作类似的表格，如下所示
它创建的动态表单字段正是我所需要的。
现在我需要的是，当用户在更改事件中填写这些字段中的数据时，我要检索字段的个数，以汇总所有字段的值。
或
每次用户填写或更改这些字段的值时，我需要进一步计算这些字段的值

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）：

$（文档）.ready（函数（）{
var计数器=0；
$（“#添加行”）。在（“单击”上，函数（）{
计数器=$（'#myTable tr'）。长度-2；
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
$（“table.order list”）.append（newRow）；
计数器++；
});
$（“table.order list”）。在（“更改”上，输入[name^=“price”]”，函数（事件）{
计算器低（$（此）.tr）；
calculateGrandTotal（）；
});
$（“table.order list”）。在（“click”、“.ibtnDel”上，函数（事件）{
$（this）.tr.remove（）；
calculateGrandTotal（）；
计数器-=1
});
});
函数计算器OW（行）{
var price=+row.find（'input[name^=“price”]”）。val（）；
}
函数calculateGrandTotal（）{
var-grandTotal=0；
$（“table.order list”）.find（'input[name^=“price”]”）。每个（函数（）{
grandTotal++$（this.val（）；
});
$（“#grandtotal”）.text（grandtotal.toFixed（2））；
}

小提琴会回答你的问题。。它添加和删除行。（您可以将其更改为表单）

更新：

这回应了OPs对评论的要求。

<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>

它有以下脚本（需要jquery）：

$（文档）.ready（函数（）{
var计数器=0；
$（“#添加行”）。在（“单击”上，函数（）{
计数器=$（'#myTable tr'）。长度-2；
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
$（“table.order list”）.append（newRow）；
计数器++；
});
$（“table.order list”）。在（“更改”上，输入[name^=“price”]”，函数（事件）{
计算器低（$（此）.tr）；
calculateGrandTotal（）；
});
$（“table.order list”）。在（“click”、“.ibtnDel”上，函数（事件）{
$（this）.tr.remove（）；
calculateGrandTotal（）；
计数器-=1
});
});
函数计算器OW（行）{
var price=+row.find（'input[name^=“price”]”）。val（）；
}
函数calculateGrandTotal（）{
var-grandTotal=0；
$（“table.order list”）.find（'input[name^=“price”]”）。每个（函数（）{
grandTotal++$（this.val（）；
});
$（“#grandtotal”）.text（grandtotal.toFixed（2））；
}

小提琴会回答你的问题。。它添加和删除行。（您可以将其更改为表单）

更新：

这回应了OPs对评论的要求。


<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>

动态创建输入字段-使用jQuery
$（函数（）{
var addDiv=$（“#addinput”）；
变量i=$（'#addinput p'）.size（）+1；
$（'#addNew'）.live（'单击'，函数（））{
$（'p>'）。附录（addDiv）；
i++；
返回false；
});
$（'#remNew'）.live（'click'，function（）{
如果（i>2）{
$（this.parents（'p'）.remove（）；
//我--；
}
返回false；
});
});
动态添加新的输入框


动态创建输入字段-使用jQuery
$（函数（）{
var addDiv=$（“#addinput”）；
变量i=$（'#addinput p'）.size（）+1；
$（'#addNew'）.live（'单击'，函数（））{
$（'p>'）。附录（addDiv）；
i++；
返回false；
});
$（'#remNew'）.live（'click'，function（）{
如果（i>2）{
$（this.parents（'p'）.remove（）；
//我--；
}
返回false；
});
});
动态添加新的输入框

使用更改/输入事件完成任务。。！你可以使用JQuery吗，@Nothing？我正在使用wordpress。任何东西都可以。我可以使用JQuery/jsuse change/input事件来完成你的任务。。！你可以使用JQuery吗，@Nothing？我用的是wordpress，任何东西都可以用，我对dat都可以，JQuery/jsu都可以，伙计，我会用的，但首先我需要了解这是怎么回事，谢谢@Ejay，我修改了它，但问题是，当我删除行时，它并没有减去值，请你帮我修改一下。问题是您将总重量设置为全局。它在每次运行中都不会返回0。感谢您的更新，实际上我正在尝试获取每行的价格和重量之和，如：a=p1*w1；b=p2*w2；c=p3*w3。。。。每行的总重量计算方法如下：第一个总重量=a；第二总计=总计+c或a+b+ci将其更新至，但仍然存在错误，你能在此帮助我吗？你真棒的朋友，我会继续，但首先我需要了解这是如何进行的thankshi@Ejay我将其修改至，但问题是，当我删除该行时，它并没有减去“你能帮我吗，请小提琴”的值。问题是您将总重量设置为全局。它在每次运行中都不会返回0。感谢您的更新，实际上我正在尝试获取每行的价格和重量之和，如：a=p1*w1；b=p2*w2；c=p3*w3。。。。每行的总重量计算方法如下：第一个总重量=a；第二总计=总计+c或a+b+ci将其更新到，但仍然存在bug，您能在这里帮助我吗