Question

我需要一个需要多次重复此行的表单。行包括文本字段，收音机，复选框，选择框所有类型的输入字段。输入第一个输入字段后，只需按Enter即可在下一个字段显示光标。应添加添加按钮以添加每一行。提交表单数据后应保存在mysql DB中。

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>

祝你好运！

多输入顺畅

1 个答案: