Question

当我添加一个新的输入字段时，它的位置和填充会变形或变得不一致。我想让所有新输入字段与第一个一致。

以下是代码：

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>INVOICE</title>
      <meta charset="utf-8">



    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> 
    <script src="js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="js/main3.js"></script>
    </head>
    <script>
    $(document).ready(function(){
      $(document).on('click','#submit',function(e) {
        var data = $("#invoice_form").serialize();
        $.ajax({
            data: data,
            method: "POST",
            url: "insert.php",
            success: function(data){
            alert("Data: " + data);
            }
        });
      });
    }); 
    </script>
    <body>
    <br>
    <br>

    <div id="wrapper" class="container">

     <form method="POST" action="" id="invoice_form">
      <div class="row">
        <label class="col-md-12">
          <div class="form-group" id=invoice>Enter Invoice No
            <input type="text" class="form-control" placeholder="" name="invoiceNum">
          </div> 
        </label>
      </div>

      <div class="row">
        <label class="col-md-6">
          <div class="form-group">Bill To 
            <input type="text" class="form-control" placeholder="" name="name">
          </div> 
        </label>
        <label class="col-md-6">
          <div class="form-group">Address
            <input type="text" class="form-control" placeholder="" name="address">
          </div> 
        </label>
      </div>

      <div class="row">
      <div class="after_add_button">
        <label class="col-md-6">
          <div class="form-group" id="particular">Description
            <textarea class="form-control"  placeholder="" name="describe[]"></textarea>
          </div> 
        </label>
        <label class="col-md-2">
          <div class="form-group">Quantity
            <input type="text" class="form-control" id="Major" placeholder="" name="quantity[]">
          </div> 
        </label>
        <label class="col-md-2">
          <div class="form-group">Rate
            <input type="text" class="form-control" id="Major" placeholder="" name="rate[]">
          </div> 
        </label>
        <div class="col-md-2" id="b">
           <button type="button" class="btn btn-primary add_button"><i class="fa fa-plus"></i></button> 
        </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                <button type="submit" class="btn btn-warning" id="submit">Submit</button>
            </div>
        </div>

      </div>
      </form>

    <script>
       $(document).ready(function(){

      var max_fields = 10;
      var add_button = $('.add_button');
      var field_wrapper = $('.after_add_button');
      var new_field_html = '<div class="row copy"><hr><label class="col-md-6"><div class="form-group">Description<textarea class="form-control"  placeholder="" name="describe[]"></textarea></div> </label><label class="col-md-2"><div class="form-group">Quantity<input type="text" class="form-control" id="Major" placeholder="" name="quantity[]"></div></label><label class="col-md-2"><div class="form-group">Rate<input type="text" class="form-control" id="Major" placeholder="" name="rate[]"></div></label><div class="col-md-2" id="b"><button type="button" class="btn btn-primary remove_button"><i class="fa fa-minus"></i></button></div></div>';

        //Add fields dynamically
        var input_count = 1;
        $(add_button).click(function(){
          if(input_count < max_fields){
            ++input_count;
            $(field_wrapper).append(new_field_html);
          }
        });

        //Remove fields dynamically
        $(field_wrapper).on('click', '.remove_button', function(e){
          e.preventDefault();
          $(this).closest('div.copy').remove();
          --input_count;
        });
    });
    </script>




      <br>
      <br>
    </div>



    </body>
    </html>

Answer 1

你根本不需要做什么。您只需在css中添加<div class="row copy">。

请看下面的内容，

<style type = "text/css">
.copy
{
   clear:both;
}
</style>

因为您的div标记覆盖了过多。当您在代码中使用此css时，这将得到修复。

Cheerss .. !!

Answer 2

这是你的解决方案......

   <!DOCTYPE html>
<html lang="en">
<head>
    <title>INVOICE</title>
    <meta charset="utf-8">



    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="js/main3.js"></script>
    <style>.form-group {width: 100% !important;}</style>
</head>
<script>
    $(document).ready(function() {
        $(document).on('click', '#submit', function(e) {
            var data = $("#invoice_form").serialize();
            $.ajax({
                data: data,
                method: "POST",
                url: "insert.php",
                success: function(data) {
                    alert("Data: " + data);
                }
            });
        });
    });
</script>

<body>
    <br>
    <br>

    <div id="wrapper" class="container">
        <form method="POST" action="" id="invoice_form">
            <div class="row">
                <div class="col-md-12">
                    <label class="form-group" id="invoice">Enter Invoice No
                        <input type="text" class="form-control" placeholder="" name="invoiceNum">
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="form-group">Bill To
                        <input type="text" class="form-control" placeholder="" name="name">
                    </label>
                </div>
                <div class="col-md-6">
                    <label class="form-group">Address
                        <input type="text" class="form-control" placeholder="" name="address">
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="after_add_button">
                    <label class="col-md-6">
                        <div class="form-group" id="particular">Description
                            <textarea class="form-control" placeholder="" name="describe[]"></textarea>
                        </div>
                    </label>
                    <div class="col-md-2">
                        <label class="form-group">Quantity
                            <input type="text" class="form-control" id="Major" placeholder="" name="quantity[]">
                        </label>
                    </div>

                    <div class="col-md-2">
                        <label class="form-group">Rate
                            <input type="text" class="form-control" id="Major" placeholder="" name="rate[]">

                        </label>
                    </div>
                    <div class="col-md-2" id="b">
                        <button type="button" class="btn btn-primary add_button" style="margin-bottom: 60px"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="form-group">
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-warning" id="submit">Submit</button>
                    </div>
                </div>

            </div>
        </form>

        <script>
            $(document).ready(function() {

                var max_fields = 10;
                var add_button = $('.add_button');
                var field_wrapper = $('.after_add_button');
                var new_field_html = '<div class="row copy"><hr><label class="col-md-6"><div class="form-group">Description<textarea class="form-control"  placeholder="" name="describe[]"></textarea></div> </label><label class="col-md-2"><div class="form-group">Quantity<input type="text" class="form-control" id="Major" placeholder="" name="quantity[]"></div></label><label class="col-md-2"><div class="form-group">Rate<input type="text" class="form-control" id="Major" placeholder="" name="rate[]"></div></label><div class="col-md-2" id="b"><button type="button" class="btn btn-primary remove_button"><i class="fa fa-minus"></i></button></div></div>';

                //Add fields dynamically
                var input_count = 1;
                $(add_button).click(function() {
                    if (input_count < max_fields) {
                        ++input_count;
                        $(field_wrapper).append(new_field_html);
                    }
                });

                //Remove fields dynamically
                $(field_wrapper).on('click', '.remove_button', function(e) {
                    e.preventDefault();
                    $(this).closest('div.copy').remove();
                    --input_count;
                });
            });
        </script>




        <br>
        <br>
    </div>



</body>

</html>

添加/删除动态输入字段

2 个答案: