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> 

나는 '규칙 추가'버튼을 사용하여 위의 동적 요소를 만들었습니다. 그래서 위와 같은 동적 요소를 만드는 데 자바 스크립트를 사용했습니다. 자바 스크립트는 다음과 같습니다.

<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

기존 양식에 새 요소를 삽입 할 때 및 수신하려는 기존 입력과 다른 이름을 가진 경우 두 번째 양식을 작성할 필요가 없습니다.

두 개의 서로 다른 입력 데이터 모음에 대해 서로 다른 제출 단추를 원하면 두 번째 양식을 생성 할 수 있습니다.