当关注表单中的最后一个输入时自动添加行

Add row automatically when focused on last input in the form

本文关键字:输入 添加行 最后一个 表单      更新时间:2023-09-26

我被困在项目的一部分,用户应该继续填写表单,当用户关注表单中的最后一个输入时,应该自动添加新行。我不擅长JS/jQ,所以也许你们中有人可以帮助我…它正在工作,但仍然只是从第一行,而不是从重复的。Thanks is advance

<form class="form-inline" method="post" action="loadin.php">
    <!-- form header -->
    <hr>
    <div class="form-group">
        <select class="form-control" name="vendor" id="vendor">
            <?php 
                foreach($vendors_ as $v){
                    echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
                } 
            ?>
        </select>
        <input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
        <input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
        <button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
    </div>
    <hr>
    <!-- form lines -->
    <div class="duplicate" style="margin-bottom: 5px;">
        <div class="form-group">
            <input type="hidden" class="form-control cleanVal" name="row[]"       id="row">
            <select class="form-control" name="category[]" id="category">
                <?php 
                    foreach($types_ as $t){
                        echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
                    } 
                ?>
            </select>
            <input type="text" class="form-control cleanVal" name="item[]"    id="item"    placeholder="Položka">
            <input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
            <input type="text" class="form-control cleanVal" name="amount[]"  id="amount"  placeholder="Množství">
            <input type="text" class="form-control cleanVal" name="price[]"   id="price"   placeholder="Cena">
            <input type="text" class="form-control cleanVal" name="atest[]"   id="atest"   placeholder="Atest">
            <input type="text" class="form-control cleanVal" name="batch[]"   id="batch"   placeholder="Sarže">
            <input type="text" class="form-control cleanVal" name="expire[]"  id="expire"  placeholder="Expirace"   style="width:80px">
            <input type="text" class="form-control cleanVal x" name="vat[]"   id="vat"     placeholder="DPH"        style="width:45px">
        </div>
    </div>
</form>
$(".duplicate:last input").focus(function() {
    count++;
    var $clone = $('.duplicate:last').clone();
    $clone.find("input,select").each(function(){
        $(this).attr({
            id: $(this).attr("id") + count,
        });
    });
    $("form").append($clone);   
    $(".duplicate:last .cleanVal").val(''); 

Event delegation 允许我们将单个事件侦听器附加到父元素上,该侦听器将为匹配选择器的所有后代触发,无论这些后代现在存在还是将来添加。

由于每次添加新元素时最后一个元素都被更改,因此侦听父body或任何其他fixed上的事件。

var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
  count++;
  var $clone = $('.duplicate:last').clone();
  $clone.find("input,select").each(function() {
    $(this).attr({
      id: $(this).attr("id") + count,
    });
  });
  $("form").append($clone);
  $(".duplicate:last .cleanVal").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
  <hr>
  <div class="form-group">
    <select class="form-control" name="vendor" id="vendor">
    </select>
    <input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
    <input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
    <button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
  </div>
  <hr>
  <div class="duplicate" style="margin-bottom: 5px;">
    <div class="form-group">
      <input type="hidden" class="form-control cleanVal" name="row[]" id="row">
      <select class="form-control" name="category[]" id="category">
      </select>
      <input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
      <input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
      <input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
      <input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
      <input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
      <input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
      <input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
      <input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
    </div>
  </div>
</form>

<

小提琴演示/h2>

你必须定义你的焦点事件如下:

$('body').on('focus', ".duplicate:last input", function() {
   // codes here
}