如何在填写现有字段后在表单中添加一组输入字段
How to add a set of input fields in a form after filling the existing fields
当您在表单的输入框中输入详细信息时,我正在尝试做一些事情,用Ajax加载信息,然后在下面添加另一行。到目前为止,我所做的是填充第一个输入框,使用ajax获取数据,并添加一行新的输入框。但当我在第二行时,它就不能正常工作了。我的代码是:
<form role="form" class="container" method="POST" id="form" action="">
<div class="row" data-line="1">
<div class="col-md-2">
<div class="form-group">
<label for="ticketNo">Ref #</label>
<input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="amount">Price</label>
<input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="agent">Agent</label>
<input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="received">Amount Received</label>
<input type="text" name="received" class="form-control" id="received" placeholder="">
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
var rowCntr = 1;
$("#ticketNo").blur(function () {
$.ajax({
url: "payment_ss.php?action=getInfo&p="+$(this).val(),
success: function (result) {
var ar = result.split("|");
console.log(rowCntr);
$(".row[data-line='"+ rowCntr +"'] #amount").val(ar[0]);
$(".row[data-line='"+ rowCntr +"'] #received").val(ar[0]);
$(".row[data-line='"+ rowCntr +"'] #agent").val(ar[1]);
}
});
});
$("#received").bind('keyup', function(e) {
if (e.which == 13) {
var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
$("#form").append(app);
app.attr("data-line", rowCntr);
$("[data-line='"+ rowCntr +"'] #ticketNo").focus();
rowCntr++;
}
});
});
</script>
尝试
$("#received").on( 'keyup' , function(e) {
if (e.which == 13) {
var app = $('<div class="row"><div class="col-md-2"><div class="form-group"><input type="text" name="ticketNo" class="form-control" id="ticketNo" ind="1" placeholder="Ref #"></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="amount" class="form-control" id="amount" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="agent" class="form-control" id="agent" placeholder="" disabled></div></div><div class="col-md-2"><div class="form-group"><input type="text" name="received" class="form-control" id="received" placeholder=""></div></div></div>');
$("#form").append(app);
app.attr("data-line", rowCntr);
$("[data-line='"+ rowCntr +"'] #ticketNo").focus();
rowCntr++;
}
});
相关文章:
- 使用单个文本框向多个字段添加严格搜索
- WooCommerce-根据自定义字段添加费用
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- j查询检查复选框是否被选中,然后向输入字段添加值
- 使用 javascript 将各种输入字段添加到一起
- 使用 jQuery 将字段添加到表中的 HTML 表单中
- 如何从动态输入字段添加数字
- Extjs 3.3动态地将字段添加到表单中,并设置它们的标签宽度
- JQuery:如何检查复选框是否被选中并向字段添加属性
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- Bootstrap typeahead为隐藏字段添加值
- 使用chrome扩展(HTML、CSS、JavaScript)向输入字段添加可点击的图标/按钮
- 正在向输入字段添加自定义验证
- 使用javascript向输入字段添加值
- 如何将自定义字段添加到Json结果-ASP.NET MVC
- 向选定的弹出字段添加逗号
- Accounts.onCreateUser 未将字段添加到 Meteor 的用户集合中
- 如何将自定义字段添加到 dhtmlxScheduler
- 根据 JavaScript 中的选中复选框将字段添加到页面
- 如何从开始日期中的单独字段添加天数/周,以在日期选择器中获取结束日期