当关注表单中的最后一个输入时自动添加行
Add row automatically when focused on last input in the form
我被困在项目的一部分,用户应该继续填写表单,当用户关注表单中的最后一个输入时,应该自动添加新行。我不擅长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
}
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- Angularjs在当前行位置添加行
- 在change事件javascript上动态添加行
- 当源工作表添加了行时,如何编写在一个工作表中添加行的脚本
- 添加行并运行多个mySQL查询
- 基于用户垂直滚动向HTML表添加行
- 为具有相同类的多个输入添加、移除和添加一个类
- 在表中动态添加行
- 为收音机点击的输入添加值,然后删除
- 在使用 javascript 动态添加行时,我正在增加索引值,但出现错误
- 动态添加行时计数器的增量
- 提交表单时如何在 HTML 表格中添加行
- 用户未输入几行时的 JavaScript 计算(添加剩余的行值)
- 如何在表单中的每个输入/新行之后添加
标签 - 按钮添加行并从文本字段输入单元格值
- 当关注表单中的最后一个输入时自动添加行
- jQuery根据输入添加或删除表行
- 使用Jquery添加行-需要增加输入名称和onkeyup事件调用者
- 在编辑时向文本区域输入添加新行