显示来自动态创建的输入字段的值-jQuery

问题描述

我有一段jquery的代码，当用户单击“添加”按钮时会在div内创建2个输入字段。

该脚本还会为每个输入用户名及其地址添加唯一ID，例如：

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">1</span>
  </div>
  <input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
  <input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
 <div class="input-group-append">
    <span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
  </div>
</div>

username1 adress1
username2 adress2
username3 adress3
...

如何为每个用户名字段“立即”创建具有相同ID（数字）的<div>并追加与ID匹配的用户名和地址值，例如：

 <div id="result1">
username1(value) <br/>
adress1(value)
</div> 

此外，当我单击“删除”按钮（跨度）时，如何删除该用户名，其地址字段和匹配结果<div>，并重新排列左侧的字段和结果ID。

我此时停留在： https://jsfiddle.net/ribosed/f0arxw5h/17/

$(document).ready(function(){

    var counter = 2;

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

    if(counter>10){
            alert("Only 10 textBoxes allow");
            return false;
    }

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

    usernamesDiv.after().html('<div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
    '</span></div><input type="text" id="username' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
    '<input type="text" id="adress' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + '   <div class="input-group-append"><span class="input-group-text" id="inputGroup-sizing-sm">Remove</span></div>' +
          '</div>');

    usernamesDiv.appendTo("#TextBoxesGroup");
    

    counter++;
    
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textBox to remove");
          return false;
       }

    counter--;

        $("#username" + counter).remove();


     });

   
  });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 
   <!-- JS ------jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


 
    <!-- Include all compiled plugins (below),or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="padding:45px 10px 10px 10px;">



<button type="button"  id='addButton' class="btn btn-primary btn-sm" >Add username</button>
<br/>


<div id='TextBoxesGroup'>
    <div id="usernames1">
        <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">1</span>
  </div>
  <input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
  <input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
 <div class="input-group-append">
    <span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
  </div>
 
    </div>
</div>





<div>
         

解决方法

这是为您准备的完整工作代码。几乎没有什么需要change才能满足您的要求的。

要在每个输入框下方显示each值dynamically，我们需要对动态添加到每个输入字段的用户名和地址类别使用jQuery $.each函数。

一旦我们遍历每个可用输入，我们将对其进行检查attr，例如您的username1或address1。随着id's的动态添加，我们需要确保我们也获取它们的值separately，以便它们显示在结果部分。

我还通过在页面上添加新字段输入框来简化您的代码，我们可以使用append()函数将新克隆fields添加到我们的div中。我们只是保留一个div，这些新字段（一个新的div）将显示在其中。

要为remove添加一个特定的字段输入组，我们需要使用event delegation并将一个类添加到remove按钮中，一旦创建，我们就可以删除.parent函数。页面上的整个input group和计数器中的decrease。

最后，我也为每行代码添加了注释，供您理解

实时工作演示：

$(document).ready(function() {
  //Counter
  var counter = 2;

  //Add fields
  $("#addButton").click(function() {
    if (counter > 10) {
      alert("Only 10 textboxes allow");
      return
    }

    //New field HTML
    var usernamesDiv = ('<div id="usernames' + counter + '"><div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
      '</span></div><input type="text" id="username' + counter + '" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
      '<input type="text" id="adress' + counter + '" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + '<div class="input-group-append"><span class="input-group-text removeButton">Remove</span></div>' +
      '</div><div id="results' + counter + '"></div></div>');

    //Append new fields
    $('.newTextBoxes').append(usernamesDiv);

    //Increase the counter
    counter++;

  });

  //Remove clicked field
  $(document).on('click','.removeButton',function() {
    //Remove clicked feilds
    $(this).parent().parent().parent().remove(); //remove username parent

    //Decrease the counter
    counter--;
  });


  //Display results / below each input
  $(document).on('click','#showInputValue',function() {

    //Each username
    var results = '<div id="results">'
    $('.username').each(function(index,element) {
      var getUserAttr = $(element).attr('id')
      var getUserValue = $(element).val()
      var lastChar = getUserAttr.substr(getUserAttr.length - 1);
      var getDiv = $('#results' + lastChar + '')
      var getDiv1 = $('#results' + lastChar + ' .user')
      getDiv1.html('') //empty username
      getDiv.append('<span class="user">' + getUserAttr + '(' + getUserValue + ')<br></span>')
    })


    //Each address
    $('.address').each(function(index,element) {
      var getAddrAttr = $(element).attr('id')
      var getAddrValue = $(element).val()
      var lastChar = getAddrAttr.substr(getAddrAttr.length - 1);
      var getDiv = $('#results' + lastChar + '')
      var getDiv1 = $('#results' + lastChar + ' .addr')
      getDiv1.html('') //empty address
      getDiv.append('<span class="addr">' + getAddrAttr + '(' + getAddrValue + ')</span>')
    })
  })

});

.removeButton {
  cursor: pointer;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div style="padding:45px 10px 10px 10px;">
  <button type="button" id='addButton' class="btn btn-primary btn-sm">Add username</button>
  <br>
  <br>
  <div id='TextBoxesGroup'>
    <div id="usernames1">
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">1</span>
        </div>
        <input type="text" id="username1" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
        <input type="text" id="address1" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
        <div class="input-group-append">
          <span class="input-group-text">Remove</span>
        </div>
      </div>
      <div id="results1"></div>
    </div>

    <div class="newTextBoxes"></div>

    <button type="button" id='showInputValue' class="btn btn-success btn-sm">Display Input Values</button>

    </div>