处理未知数量的表单值答案

【问题标题】：Handling unknown number of form values处理未知数量的表单值
【发布时间】：2015-03-28 12:30:36
【问题描述】：

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

我的表格是这样的

我的问题是：你会如何处理这种情况？ 请问我是否有不清楚的地方。

【问题讨论】：

所有附加数据的结构是否始终相同？您是否使用 javascript 添加数据？
它总是相同的结构，只有两个属性（两个字符串）。我在考虑使用 js，但我愿意接受任何建议。

标签： javascript c# jquery .net asp.net-mvc

【解决方案1】：

这个问题似乎是 js 特定的，所以我没有在 sn-p 中添加任何 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>

【讨论】：

【解决方案2】：

对于创建的每个附加表单，您都可以给它一个名称，例如数组。

<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>
<input type="number" name="number[]"/>

然后你可以额外的，然后在服务器端循环它

【讨论】：