javascript - 处理未知数量的表单值

Question

我有一个表单，除了其他属性之外，还有一个链接，它将打开一个模式窗口以输入附加信息。生成表单时附加信息是未知的，因此我需要在创建这些项目后生成它们。我想我可以附加一个 <form>然后包裹一个<div>到 <div> 中输入的每对数据，然后计算输入了多少数据。

我的表单看起来像这样

我的问题是:您将如何处理这种情况？请询问我是否有不清楚的地方。

Answer 1

这个问题似乎是 js 特定的，所以我没有在代码片段中添加任何 asp mvc 的东西，只是解决了添加鞋子的功能。显然，您必须考虑到需要将列表发送回服务器以保存更改。我认为这超出了这个问题的范围

$(function (){
  
  
  // Shoe add
  $('#saveValue').click(function(){
    
    // Get shoe name
    var shoeName = $('.modal-body input:first').val();
    // Get shoe number
    var shoeNum = $('.modal-body input:last').val();

    // Create structure to add to list 
     $('#addedValues ul').append("<li> Shoe Name: <strong>" + shoeName + "</strong><br /> Shoe Number <strong>" + shoeNum + "</strong></li> <hr />");
    
    $('#valuesModal').modal('hide');
  });
  
});

.container{
  margin-top:30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="col-sm-6">
    
    <form>
      
        <div class="form-group">
          <input type="text" class="form-control" value="First Name" />     
        </div>
      
        <div class="form-group">
          <input type="text" class="form-control" value="First Name" />
        </div>
      
        <button type="submit" class="btn btn-primary">Submit</button>
      
      </form>
    
  </div>
  <div class="col-sm-6">
    <div class="row">
    <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#valuesModal"> Add new pair </button>
    </div>
    <div id="addedValues">
      <ul>
      </ul>
    </div>
  </div>  
  
  <!-- Modal -->
<div class="modal fade" id="valuesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Shoe</h4>
      </div>
      <div class="modal-body">
        
        <form>
      
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Shoe Name" />     
        </div>
      
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Shoe Number" />
        </div>
      
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="saveValue">Save Shoe</button>
      </div>
    </div>
  </div>
</div>


</div>