Question

我有一个带有两个文本框的简单表单：一个用于人们＆＃34;名称＆＃34;另一个是他们的姓氏＆＃34;。在页面上，您可以单击，它将在下面再添加两个文本框，也用于＆＃34; name＆＃34;和＆＃34;姓氏＆＃34; ..所以基本上你可以根据需要添加多对名字和姓氏。

如何计算输入数量/对（＆＃34;姓名＆＃34;和＃34;姓氏＆＃34;）的数量/对数

您可以在此处查看演示：http://poostudios.com/jstest2.html

以下是代码：

<html>
<head>
<script type="text/javascript" src="nutrition/jquery-3.1.1.js"></script>
<style type="text/css">
        div{
        padding:8px;
        }
</style>enter code here

</head>

<body>

<form action="results.php" method="get">


<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

var newTextBoxDiv = $(document.createElement('div'))
 .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Name : </label>' +
  '<input type="text" name="textbox' + counter +
  '" id="textbox' + counter + '" value="" ><label> Surname : </label>' +
  '<input type="text" name="textbox' + counter +
  '" id="textbox' + counter + '" value="" >');


newTextBoxDiv.appendTo("#TextBoxesGroup");

counter++;
});

$("#removeButton").click(function () {

counter--;
$("#TextBoxDiv" + counter).remove();

});


});
</script>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Name : </label><input type='textbox' id='textbox1' >
<label>Surname : </label> <input type='textbox' id='textbox2' >
</div>
</div>
<input type='button' value='Add' id='addButton'>
<input type='button' value='Remove' id='removeButton'>

<input type="submit" value="Go">
</form>


</body>
</html>

Answer 1

有很多方法可以做到这一点。 @Tibrogargan和我已经用各种片段散布了对你的问题的评论，这些片段将在任何给定时间返回元素的数量。

但是，每次要检查计数时，您需要完全调用这些方法以获得“实时”计数 - 所以如果您只是计划检查一次输入的数量，即例如，提交表单，您需要做的就是在提交处理程序中检查计数或将计数存储在变量中：

$('form').on('submit',function(e){
  e.preventDefault();

  // store the current count in a variable (this will not change if the user adds another input)
  var current_count = $('#TextBoxesGroup input').length / 2;

  // do what you want with the current_count variable
  console.log("The user has submitted the form with " + current_count + " input fields");

});

但是，您可能不仅计划一次计算输入字段的数量。也许您正在监控用户的行为。在这种情况下，您可以定义一个函数，使事情变得更简洁。

不是使用递增/递减的计数器，而是按以下方式定义counter函数：

function counter(){
    return $('#TextBoxesGroup input').length / 2;
    /* 
      This could also be: 
        return document.getElementById('TextBoxesGroup').getElementsByTagName('input').length / 2;
    */
}

现在，每当您需要检查有多少输入对时，只需调用counter()，即可返回该值。所以，让我们假设您在用户点击某些内容时检查输入的数量 - 您的代码可能如下所示：

$('body').on('click', 'input[type=button]', function(){


  // conditionally pass the current count straight to a function which uses the data
  if ( counter() > 0 ) processMyData( counter() );

  // or, if you process the data here, then pass it on to another function
  // store the current count
  var current_count = counter();

  // do nothing if there are no input fields
  if ( current_count < 1 ) return;

  // do what you want with the count now that you have it
  myAnalytics.inputs.save( current_count );

  // do something else with it
  processMyData( current_count );      

  // etc.
});

Answer 2

由于你已经使用了jquery，这就是你如何获得长度。除以2，因为每个人都有一组名称和用户名。

<script>
    var len = $('#TextBoxesGroup').find('input').length / 2;
    // Do whatever you wanted to do with the len
</script>

以下是plunker sample

Answer 3

首先在你的代码中，id不是唯一的，所以我稍微修改了一下，看看下面的演示（我使用append()函数来创建标记。）

其次，因为你使用了一个计数器变量，只需用它来计算对的数量，用它除以2（counter / 2）。

var counter = 2;
$("#addButton").click(function() {
    $('<div>', {
    	id : 'TextBoxDiv' + counter
    }).append(
    	$('<label>', {
            text: 'Name : '
        }),
        $('<input>', {
            type: 'text',
            name: 'textbox' + (++counter), // increment counter for name
            id: 'textbox' + counter,
            value: ''
        }),
        $('<label>', {
            text: 'Surname : '
        }),
        $('<input>', {
            type: 'text',
            name: 'textbox' + (++counter), // increment counter for surname
            id: 'textbox' + counter,
            value: ''
        })
    ).appendTo('#TextBoxesGroup');
    
    // just divide the counter by 2 to get the pairs
    console.log('input text pairs: ' + counter/2);
});

$("#removeButton").click(function() {
    // if counter === 2 (initial) then remove nothing
    if (counter === 2) {
    	return false;
    }

    // decrement counter by 2
    // and remove the textbox container
    counter-=2;
    $("#TextBoxDiv" + counter).remove();
    console.log('input text pairs: ' + counter/2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="results.php" method="get">
    <div id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <label>Name : </label>
            <input type='textbox' id='textbox1'>
            <label>Surname : </label>
            <input type='textbox' id='textbox2'>
        </div>
    </div>
    <input type='button' value='Add' id='addButton'>
    <input type='button' value='Remove' id='removeButton'>

    <input type="submit" value="Go">
</form>

Answer 4

$（＆＃34; #textbox1＆＃34;）。length将为您提供名称文本字段的出现次数。

如何计算动态添加的输入？

4 个答案: