양식이 정렬되지 않은 채로 추가 된 필드

Question

제출 버튼 앞에 정렬 된 필드를 추가하는 방법은 무엇입니까? 내가하고있는 방식대로 잘되어 있으며 추가 된 필드를 추가하기위한 항목이 누락되었습니다. 나는 다른 기능은? https://jsfiddle.net/ab5v3dss/4/

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3"> 
     Menu 
    </div> 
    <div class="col-md-6"> 
     <form id="formHabitaciones" class="form-horizontal" method="post"> 
     <fieldset> 
      <legend>Agregar Hotel</legend> 
      <div class="form-group col-xs-12 pull-left"> 
      <div class="col-xs-3"> 
       <label class="control-label pull-right" for="ID_del_evento">Evento:</label> 
      </div> 
      <div class="col-xs-9"> 
       <select name="ID_del_evento" id="ID_del_evento" class="form-control input-md pull-left"> 
       <option value=""></option> 
       <?php 
    foreach ($results as $row) { 
     echo "<option value='" . $row['ID_del_evento'] . "'"; 
     if (!empty($_GET['ID_del_evento'])) { 
     if ($row['ID_del_evento'] == $_GET['ID_del_evento']) { 
     echo " selected"; 
     } 
     }; 
     echo ">" . $row['Nombre'] . "</option>"; 
    } 
    ?> 
       </select> 
      </div> 
      </div> 
      <div class="form-group col-xs-12"> 
      <div class="col-xs-3"> 
       <label class="control-label pull-right" for="Nombre">Nombre:</label> 
      </div> 
      <div class="col-xs-9"> 
       <input type="Nombre" class="form-control input-md pull-left" id="Nombre" placeholder="Ingresa el nombre" name="Nombre"> 
      </div> 
      </div> 
      <div class="form-group col-xs-12"> 
      <div class="col-xs-3"> 
       <label class="control-label pull-right" for="Tarifa_de_transporte">Tarifa de transpore:</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="text" class="form-control input-md pull-left" id="Tarifa_de_transporte" placeholder="Ingresa la Tarifa_de_transporte" name="Tarifa_de_transporte"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label class="col-xs-2 control-label">Habitaciones</label> 
      <div class="voca"> 

       <div class="col-xs-2"> 
       <input type="text" class="form-control" name="habitacion0].ocupacion" placeholder="Ocupacion" /> 
       </div> 
       <div class="col-xs-2"> 
       <input type="text" class="form-control" name="habitacion[0].categoria" placeholder="Categoria" /> 
       </div> 
       <div class="col-xs-2"> 
       <input type="number" class="form-control" name="habitacion[0].camas" placeholder="Camas" /> 
       </div> 
       <div class="col-xs-2"> 
       <span class="input-group-addon">$</span> 
       <input type="number" class="form-control" name="habitacion[0].tarifa" placeholder="Tarifa" /> 
       </div> 
       <div class="col-xs-1"> 
       <button type="button" class="btn btn-success btn-add"> 
        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Agregar mas 
       </button> 
       </div> 
      </div> 
      </div> 
      <div class="form-group col-xs-12"> 
      <div class="col-xs-9"> 
       <button type="submit" class="btn btn-success">Submit</button> 
      </div> 
      </div> 
     </fieldset> 
     </form> 
    </div> 
    </div> 
</div> 

$(function() { 
    $(document).on('click', '.btn-add', function(e) { 
    e.preventDefault(); 

    var controlForm = $('.col-md-6 form:first'), 
     currentEntry = $(this).parents('.voca:first'), 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 

    newEntry.find('input').val(''); 
    controlForm.find('.btn-add:not(:last)') 
     .removeClass('btn-default').addClass('btn-danger') 
     .removeClass('btn-add').addClass('btn-remove') 

    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Quitar '); 
    }).on('click', '.btn-remove', function(e) { 
    $(this).parents('.voca:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
}); 

이 내가 할 수있는 최선되어 있는지 확인해야합니다 best I could

Answer 1

기본적인 아이디어는 정확하지만 당신은 몇 가지 코딩 오류가 있습니다. 예를 들어, 몇 줄의 세미콜론 대신 쉼표를 사용하고 있습니다.

내가 원하는 간단한 버전의 펜을 만들었습니다. 이것을 시작점으로 사용하면 단계별로 특정 기능을 단계별로 추가하고 각 단계에서 제대로 작동하는지 확인할 수 있습니다.

<div class="one"> 
    <p>one</p> 
    <button class="append"><p>append</p></button> 
    <br><br> 
    <button class="submit">Submit</button> 
</div> 

CSS

div { 
    width: 150px; 
    min-height: 150px; 
    margin: 20px; 
    background: yellow; 
} 

jQuery를이 :

$(function() { 
    $('.append').click(function() { 
     $('.submit').before($('.one p:first').clone()); 
    }); 
}); 

https://codepen.io/wahhabb/pen/ZKoqqJ

Answer 2

나는 하나 개의 클래스를 생성하고 그 안에 함께 엑스트라 항목을 추가했다. Fiddle을 확인하고 알려주세요.

$(function() { 
    $(document).on('click', '.btn-add', function(e) { 
    e.preventDefault(); 

    var controlForm = $('.extras'), 
     currentEntry = $(this).parents('.voca:first').addClass('clearfix'), 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 

    newEntry.find('input').val(''); 
    controlForm.find('.btn-add:not(:last)') 
     .removeClass('btn-default').addClass('btn-danger') 
     .removeClass('btn-add').addClass('btn-remove') 

    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Quitar'); 
    }).on('click', '.btn-remove', function(e) { 
    $(this).parents('.voca:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
});