处理未知数量的表单值

Question

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

我的表单看起来像这样

我的问题是：h 你会处理这种情况吗？ 请问我是否遗漏了一些不清楚的东西。

Answer 1

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

＆＃13;

＆＃13;

$(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');
  });
  
});

＆＃13;

.container{
  margin-top:30px;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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[]"/>

然后你可以添加其他的，然后在服务器端循环它