Многократный вход плавно

Question

Мне нужна форма, в которой такая строка должна повторяться несколько раз. Строка состоит из текстового поля, радио, флажка, выберите поле для всех типов полей ввода. После ввода первого поля ввода курсор должен отображаться в следующем поле, нажимая только Enter. Для добавления каждой строки следует добавить кнопку добавления. После отправки данных формы необходимо сохранить в DB mysql.

проверка на скриншоте ниже: - enter image description here

Answer 1

Я использовал нечто подобное вашему требованию. Надеюсь, это станет для вас полезным.

  <div class="form-group" id="text1"> 
      <label for="name" class="col-sm-3 control-label">Long/Lat</label> 
      <div class="col-sm-7" id="p_scents1"> 
       <p> 
       <!-- <div class="col-sm-6"> --> 
       <input type="text" name="fname[]" id="fname" class="col-sm-3 form-control1" placeholder="Enter firstname"> 
       <!-- </div> --> 
       <!-- <div class="col-sm-6"> --> 
       <input type="text" name="lname[]" id="lname" class="col-sm-3 form-control1" placeholder="Enter lastname"> 
       <!-- </div> --> 
       <input type="text" name="location[]" id="location" class="col-sm-3 form-control2" placeholder="Enter location"> 
       </p> 
      </div> 
      <div class="col-sm-2"> 
       <a href="#" id="addScnt1" >+ Add More</a> 
      </div> 
      </div> 

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script> 
    $(document).ready(function() {   
//alert("hret"); 
    var scntDiv1 = $('#p_scents1'); 
    var i = $('#p_scents1 p').size() + 1; 

    $('#addScnt1').live('click', function() { 

      $('<p><input type="text" id="fname'+i+'" size="20" name="fname[]' + i +'" value="" placeholder="Enter firstname" class="col-sm-3 form-control1"/><input type="text" id="lname'+i+'" size="20" name="lname[]' + i +'" value="" placeholder="Enter lastname" class="col-sm-3 form-control1"/><input type="text" id="location'+i+'" name="location[]' + i +'" class="col-sm-3 form-control2" placeholder="Enter location"><a href="#" id="remScnt1">Remove</a></p>').appendTo(scntDiv1); 
      i++; 
      return false; 
    }); 

    $('#remScnt1').live('click', function() { 
     //alert(i); 
      if(i > 2) { 
        $(this).parents('p').remove(); 
        i--; 
      } 
      return false; 
    }); 
}); 
</script> 

Удачи вам!