因此,对于jQuery而言,我只是一无所知,只是继承了别人的代码。任何帮助是极大的赞赏。
当他们将学生添加到表单时,我有一个从查询中填充的表单。他们可以将任意数量的学生添加到表单中。以下是html:
<table style="width:100%">
<tr>
<td colspan="2">
<label class="control-label" >Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label" >Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Address 2 <small>(optional)</small></label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label" >City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label" >Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr><td colspan="4"> </td></tr>
</table>
这是我一直在尝试修改的jQuery函数:
jQuery(function($){
var addStudent = function(data){
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no!=''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$($('.student').last()).after(studentEl)
}
})
该函数为数据库填充的每个学生创建一组附加字段,以供表单处理。
我希望将“名称”的特定字段修改为只读(可以查看但不能修改,但仍可以提交)。我尝试了许多其他迭代,但是无法在if子句中获取字段名称,以使该字段变为只读。
提供的任何帮助将是巨大的。
最佳答案
通过jQuery获取属性的正确方法是:$(this).attr("name")
也不要使用:
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
使用您已经创建的变量
field
:var field = $(this).attr('name').replace('[]','')
if (field == 'name'){
$(this).prop("readonly", true);
}
请参见下面的代码段:
jQuery(function($) {
var addStudent = function(data) {
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function() {
var field = $(this).attr('name').replace('[]', '')
if (field == 'name') {
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if (data.client_no != '') {
studentEl.find('.will_update').text("Will update student information for " + data.name + '')
}
$($('.student').last()).after(studentEl)
}
$('button').click(function() {
addStudent({
client_no: 1,
name: "Ralph John "
})
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
<tr>
<td colspan="2">
<label class="control-label">Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label">Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Address 2 <small>(optional)</small>
</label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label">City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label">Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
<button>Add Student</button>
关于javascript - 将表单输入更改为仅在复制元素时读取,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35690507/