javascript - 如何在ajax中引用文本字段名称?
问题描述
当用户选择特定名称时,我正在尝试将数据库中的信息自动填充到文本字段中。我用动态添加的唯一名称初始化了文本字段。
这是表格的表格:
<form name="senarai" id="senarai">
<div class="container table-responsive col-lg-10">
<table class="table table-hover table-responsive table-bordered" id="demo_table" >
<thead>
<tr>
<td class="text-center col-lg-1">#</td>
<td class="text-center col-lg-3">Nama</td>
<td class="text-center col-lg-2">No Personal</td>
<td class="text-center col-lg-1">Department</td>
<td class="text-center col-lg-1">Telefon</td>
<td class="text-center col-lg-1">Ext</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</div>
</div>
<!-- buttons -->
</head>
<div class="form-group">
<div class="row">
<input type="button" class="add-row" value="Add Row">
<button type="button" class="delete-row">Delete Row</button>
</div>
</div>
下面的 javascript 动态添加了文本字段。它包含一个选择字段和文本字段,这些字段将填充从数据库中获取的信息。
<script>
count=1;
$(document).ready(function(){
$(".add-row").click(function(){
var markup = '<tr><td class="col-lg-3"><input type="checkbox" name="rekod"></td>';
markup += '<td class="col-lg-3"><select id="nama'+ count +'" name="nama[]" class="form-control"><option value="">Choose</option><?php foreach($nama as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
markup += '<td class="col-lg-2"><input type="text" name="nopersonal'+ count +'" value="test"></td>';
markup += '<td class="col-lg-1"><input type="text" name="jabatan'+ count +'"></td>';
markup += '<td class="col-lg-1"><input type="text" name="telefon'+ count +'"></td>';
markup += '<td class="col-lg-1"><input type="text" name="ext'+ count +'"></td></tr>';
$("table tbody").append(markup);
count++;
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="rekod"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
这是一个自动填充文本字段的 javascript 代码。
<script type="text/javascript">
jQuery(document).ready(function ()
{
$(document).on('change','#nama'+ count +'',function(){
var ID = jQuery(this).val();
if(ID)
{
jQuery.ajax({
url : 'add_demo/get_nama/'+ID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
alert($('input[name="nopersonal'+count+'"]').val());//the problem is here
$('input[name="jabatan'+count+'"]').val(data.JabID);
$('input[name="telefon'+count+'"]').val(data.notelttp);
$('input[name="ext'+count+'"]').val(data.ext);
}
});
}
else
{
$('input[name="nopersonal"'+count+']').empty();
$('input[name="jabatan'+count+'"]').empty();
$('input[name="telefon'+count+'"]').empty();
$('input[name="ext'+count+'"]').empty();
}
});
});
</script>
我不能将 id 放在文本字段上,它会在控制台中产生问题和警告。我尝试使用文本字段名称属性,但 无法识别动态名称“nopersonal'+count+'” 。
当我尝试这个时:
alert($('input[name="nopersonal'"]').val()); //i put test value in the textfield
可以识别文本字段并且值出现在警报中。
我该如何解决这个问题?谢谢你。
编辑:我添加了几行,html如下
<td class="col-lg-2"><input type="text" name="nopersonal1" value="test"></td>
<td class="col-lg-2"><input type="text" name="jabatan1" value="test"></td>
<td class="col-lg-2"><input type="text" name="telefon1" value="test"></td>
<td class="col-lg-2"><input type="text" name="ext1" value="test"></td>
<td class="col-lg-2"><input type="text" name="nopersonal2" value="test"></td>
<td class="col-lg-2"><input type="text" name="jabatan2" value="test"></td>
<td class="col-lg-2"><input type="text" name="telefon2" value="test"></td>
<td class="col-lg-2"><input type="text" name="ext2" value="test"></td>
<td class="col-lg-2"><input type="text" name="nopersonal3" value="test"></td>
<td class="col-lg-2"><input type="text" name="jabatan3" value="test"></td>
<td class="col-lg-2"><input type="text" name="telefon3" value="test"></td>
<td class="col-lg-2"><input type="text" name="ext3" value="test"></td>
文本字段名称应按顺序排列。但是,如果您注意到,控制台中有 14 个“输入”而没有“+count+”。如果我将 id 与 '+count+' 放在一起,则会出现带有重复 14 个元素的非唯一 id 的控制台。
selector string: input[name="nopersonal"] selected element: n.fn.init(14) [input, input, input, input, input, input, input, input, input, input, input, input, input, input, prevObject: n.fn.init(1), context: document, selector: "input[name="nopersonal"]"]
我不确定它的原因。你有什么主意吗?
解决方案
alert($('input[name="nopersonal'+count+'"]').val());//the problem is here
您是否尝试过首先将选择器构建为字符串,console.log
对其进行确认以确认它看起来正确,然后将其传递给 jQuery?我想知道是否由于count
某种原因可能存在问题。如果它只是一个数字,JS 会在它成为 jQuery 问题之前将它插入到字符串中。
编辑:
jQuery.ajax({
url : 'add_demo/get_nama/'+ID,
type : "GET",
dataType : "json",
success: function(data) {
console.log(data);
// Changes
const selectorString = 'input[name="nopersonal'+count+'"]';
console.log("selector string: ", selectorString, "selected element: ", $(selectorString));
alert($(selectorString).val());
// /Changes
$('input[name="jabatan'+count+'"]').val(data.JabID);
$('input[name="telefon'+count+'"]').val(data.notelttp);
$('input[name="ext'+count+'"]').val(data.ext);
}
});
推荐阅读
- java - File.delete() 函数只在第一次工作,然后抛出 f noilet found for other images
- database - 索引如何改进数据库查询?
- javascript - 无法在 Node.js 中验证 RSA-PSS 签名
- php - 覆盖 Yii2 类
- django - 获取 JSONField 的键和值
- html - 如何从 div 类包装器应用填充但不在标题上
- macos - NSButton 无法在 Xcode 12.2 中正确旋转
- javascript - 具有匹配高度的图像引导响应库
- .net - RealmObject 中的 IDictionary 属性
- tcp - iptables 允许 SYN/ACK 数据包通过,而之前没有收到 SYN 数据包。这种行为正常吗?