DaPo DaPo - 2 months ago 10
jQuery Question

Add row automatically when focused on last input in the form

I'm stuck on part of my project where user should just keep filling the form and new lines should be added automatically when user focused on last input in the form. I'm not forged in JS/jQ so maybe one of you could help me... It is working but still just from the 1st line, not from the duplicated ones. 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('');

Answer

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

As last element is being changed every time new elements are appended, listen the event on the parent body or any other fixed parent.

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>

Fiddle Demo