两种形式在一个HTML文档

Question

我如下具有的形式。

<div class="container"> 
    <form method="post" action="index.php"> 
     <div id="rule"> 
      <div class="row"> 
       <div class="span5"> 
        <input type="text" class="input-xlarge" value="Rule Name"/> 
       </div> 
       <div class="span6"> 
        <input type="text" class="input-xxlarge" value="Description"/> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
     </div> 
     <br /> 
     <div id="sel" class="select"> 
      <div class="row"> 
       <div class="span1 offset2"> 
        <p class="btn btn-danger">If</p> 
       </div> 
       <div class="span2"> 
        <select class="span2" name="metrics"> 
         <option value="bounce_rate">Bounce Rate</option> 
         <option value="location">Locations</option> 
         <option value="social_media">Social Media</option> 
         <option value="search">Search</option> 
         <option value="visits">Visitors</option> 
        </select> 
       </div> 
       <div class="span1"> 
        <select name="conditions" class="span2"> 
         <option value=">">></option> 
         <option value="<"><</option> 
         <option value=">=">>=</option> 
         <option value="<="><=</option> 
         <option value="=">=</option> 
        </select> 
       </div> 
       <div class="span1 offset1"> 
        <input type="text" name="percentage" class="input-small"/> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
      <br /> 
      <div class="row"> 
       <div class="span1 offset2"> 
        <p class="btn btn-danger">Period</p> 
       </div> 
       <div class="span3"> 
        <div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
         <input class="span2" size="16" type="text" value="12-02-2012" /> 
         <span class="add-on"><i class="icon-th"></i></span> 
        </div> 
       </div> 
       <div class="span3"> 
        <div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
         <input class="span2" size="16" type="text" value="12-02-2012" /> 
         <span class="add-on"><i class="icon-th"></i></span> 
        </div> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
     </div> 
     <div id="dyna"></div> 
     <div id="end"> 
      <div class="row"> 
       <div class="span1"> 
        <p class="btn btn-danger">THEN</p> 
       </div> 
       <div class="span3"> 
        <input type="text" class="input-xlarge" value="Statement" /> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
      <div class="row"> 
       <div class="span1"> 
        <p class="btn btn-danger">ELSE</p> 
       </div> 
       <div class="span3"> 
        <input type="text" class="input-xlarge" value="Statement" /> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
      <div class="row"> 
       <button class="span1 btn btn-success" type="submit" value="submit">Submit</button> 
       <div class="span2 offset9"> 
        <p class="btn btn-success input-small" id="addRule">Add Rule </p> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
     </div> 
    </form>  
</div> 

我已经在上面添加了一个按钮'添加规则'来创建一个动态元素。所以我使用javascript来创建动态元素，就像上面那样。 javascript如下。

<script type="text/javascript"> 
$('.datepicker').datepicker(); 
(function(){ 
    var i = 0; 
    $("#addRule").live('click',function(){ 
     ++i; 
     var $ctrl = $('<div id="'+ i +'" class="select"><div class="row"><div class="span1 offset2"><button class="btn btn-danger">If</button></div><div class="span2"><select class="span2" name="metrics"><option value="bounce_rate">Bounce Rate</option><option value="location">Locations</option><option value="social_media">Social Media</option><option value="search">Search</option><option value="visits">Visitors</option></select></div><div class="span1"><select name="conditions" class="span2"><option value=">">></option><option value="<"><</option><option value=">=">>=</option><option value="<="><=</option><option value="=">=</option></select></div><div class="span1 offset1"><input type="text" name="percentage" class="input-small"/></div><div class="span2 offset1"><button class="btn btn-danger remove" id="'+ i +'">Remove</button></div><div class="clearfix"> </div></div><br /><div class="row"><div class="span1 offset2"><p class="btn btn-danger">Period</p></div><div class="span3"><div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" /><span class="add-on"><i class="icon-th"></i></span></div></div><div class="span3"><div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" /><span class="add-on"><i class="icon-th"></i></span></div></div><div class="clearfix"> </div></div></div>'); 
     $("#dyna").append($ctrl); 
     $('.datepicker').datepicker(); 
}); 
})(); 

(function(){ 
    $(".remove").live('click',function(){ 
     var remDiv = $(this).attr('id'); 
     //var questionList = "questionList"+remQ; 
     $("#" + remDiv).remove(); 
}); 

})(); 

所以我想一旦我点击提交按钮得到的值。这是正确的方式，我只使用表单来获取数据，或者我分别创建两个表单？那么该怎么做？

Answer 1

如果您要插入的新元素到现有的形式，并且只要他们从要收到任何现有的输入不同的名称，你不需要创建第二个表格。

，如果你想为不同的输入数据的两个不同的集合提交按钮，您可以创建第二个表格。