[英]Showing error in a table row if a checkbox is not checked or an input field has no value on btn click
I have a table and dynamic form fields.我有一个表格和动态表单字段。 I would like to show an error on the row having a checkbox and input field if the rows input field is empty and checkbox field in the row is not checked.
如果行输入字段为空且行中的复选框字段未选中,我想在具有复选框和输入字段的行上显示错误。
This is the php code that generates the input fields这是生成输入字段的php代码
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
foreach ($checks as $m => $check) {
$item ="";
$checkbox ="";
$textinput ="";
$displayx="";
if ($check->mandatory_customer == 1) { //mandatory customer checks
$displayx .="<i style='color:red;'>*</i>";
$item .= $check->item.$displayx;
$checkbox .='<input type="checkbox" class="1" id="chk'.$m.'">' ;
$textinput .='<input type="text" class="1" id="txt'.$m.'">' ;
} else { //not mandatory customer
$item .= $check->item;
$checkbox .='<input type="checkbox" class="0" id="chk'.$m.'">' ;
$textinput .='<input type="text" class="0" id="txt'.$m.'">' ;
}
echo "<tr id='" . $m . "'>"; //error should be set here eg: style:border: 2px solid red;
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinput."</td>";
echo "</tr>";
}
?>
}
</tbody>
Currently if a checkbox is checked the input field is disabled .当前,如果选中复选框,则禁用输入字段。 This is what am using to disable the input fields
这是我用来禁用输入字段的内容
$('input[type=checkbox]').change(function() {
if (this.checked) {
$(this).closest('tr').find('input[type=text]').prop('disabled', true);
$(this).closest('tr').find('input[type=text]').val("");
} else {
$(this).closest('tr').find('input[type=text]').prop('disabled', false);
}
}); });
I have a button that on click i would like to display the error on the tr above if the ceckbox is not checked and the input field is empty how do i go about this.我有一个按钮,如果未选中 ceckbox 并且输入字段为空,我想在单击时在上面的 tr 上显示错误,我该怎么做。
This is the button这是按钮
<button class="btn btn-success" id="approve_btn">Approve</button>
I have tried:我试过了:
$("#approve_btn").on("click", function() {
$('input[type=checkbox]').each(function() {
if (!$(this).is(':checked')) {
var inputfield = $(this).closest('tr').find('input[type=text]').val();
if(inputfield ==""){
console.log($(this));
$(this)[0].closest('tr').style.background = "thick solid #0000FF";
}
}
}
);
but fails to work但无法正常工作
Check what jQuery find() method is returning.检查 jQuery find() 方法返回的内容。 I think it returns set of elements, not a single one.
我认为它返回一组元素,而不是一个。 So you can't get val() of set.
所以你不能得到 val() 的集合。 Try to get inputfield[0].val()
尝试获取 inputfield[0].val()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.