javascript - 即使数据值不正确也无法显示正确的按钮
问题描述
- 我有一个界面可以检查特定生产批次的质量属性。
- 我能够从后端获取数据并在前端显示。
- 但无法通过拒绝和接受提交按钮实现我想要的。
- 首先,当我在范围内输入某个值时,值字段输入文本变为绿色并显示“发送完成库存”按钮。相反,我想要的是显示“拒绝批处理”按钮。因为其他文本输入尚未填写。
问题是,我想不通,当任何一个值文本输入字段变为红色时,如何显示“拒绝批处理按钮” 。
- 当所有值文本输入字段变为绿色时,我想显示“发送完成库存”按钮。
- 问题是,当我更改特定值文本输入字段时,相应地会显示拒绝或发送到库存按钮。
- 例如:-首先输入错误的值,它应该显示“拒绝批处理”按钮,这就是我想要的。
- 其次,我输入了正确的值,它显示“发送到库存”按钮,这不是我想要的,应该显示“拒绝批次”按钮。
- 如果有任何红色输入文本字段,我想显示“拒绝批处理”按钮,而不是“发送到库存”按钮,所以这就是我如何实现这一点的地方。
希望这是有道理的
这是我的 html 标记
<div class="text-center">
<button type="submit" class="btn btn-success btn-sm nodisp" data-toggle="tooltip" id="acceptbtn">send to finish stock</button>
<button type="submit" class="btn btn-danger btn-sm nodisp" data-toggle="tooltip" id="rejectbtn">reject the batch</button>
</div>
这是我的显示表单界面的 php 代码
<?php
$pro_item_id = $_GET['proitem'];
include_once('../backend/ProductQCAttribute.php');
$pro_qc_attr = new ProductQCAttribute();
$all_qc_attr = $pro_qc_attr->get_all_qc_attributes_by_product_item_id($pro_item_id);
$row = 0;
foreach ($all_qc_attr as $single_qc_attrb) {
echo ("<tr>" .
"<td>" . "<input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_id' >". $single_qc_attrb->pro_qc_attr_name ."</td>" .
"<td>" . "<input type='text' name='qc_value[]' id='qc_value_$row' class='form-control check-range' onchange='checkValue($row,$single_qc_attrb->pro_qc_attr_low_margin,$single_qc_attrb->pro_qc_attr_high_margin)' >" ."</td>" .
"<td>" . "<input type='text' name='low_margin[]' id='low_margin_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_low_margin' readonly >" ."</td>" .
"<td>" . "<input type='text' name='high_margin[]' id='high_margin_$row' class='form-control' value='$single_qc_attrb->pro_qc_attr_high_margin' readonly >" ."</td>".
"</tr>");
$row++;
}
?>
这是检查这些输入值并显示“拒绝批次”或“发送到库存”按钮的相应 JavaScript 代码
// change the color of input fields based on input user provide
// function working correclty
function checkValue(row,lowMargin,highMargin) {
if($("#qc_value_"+row).val() >= lowMargin && $("#qc_value_"+row).val() <= highMargin) {
$("#qc_value_"+row).addClass('green-check');
$("#qc_value_"+row).removeClass('red-reject'); // red-reject class I defined in the css file..its ok
} else {
$("#qc_value_"+row).addClass('red-reject');
$("#qc_value_"+row).removeClass('green-check');
}
check_green(row); // calling to this might be in the wrong place, I tried different places but didn't work it out.
}
// check weather all input fields are green, then show the accept button
// function working correctly
function check_green(row) {
if($("#qc_value_"+row).hasClass('green-check')) { // green-check class I defined in the css file..its ok
$("#status").val('pass');
$("#acceptbtn").removeClass('nodisp'); // nodisp class I defined in the css file..its ok
$("#rejectbtn").addClass('nodisp');
} else {
$("#status").val('fail');
$("#rejectbtn").removeClass('nodisp');
$("#acceptbtn").addClass('nodisp');
}
}
我试过但无法弄清楚我在这里做错了什么或我的代码中缺少什么..如果有人可以让我了解如何解决这个问题,我将不胜感激..谢谢。
解决方案
您可以检查表单中的任何控件是否具有red-reject
该类并相应地显示您的按钮。
集合jQuery
具有length
您可以使用的属性。
我稍微更改了您的标记以使用事件侦听器而不是onChange
,它将标记与逻辑分离,使其更易于维护。
// Execute whenever a user input changes
$('.check-range').on('change', function() {
// Cache the jquery object
$this = $(this);
currentValue = parseFloat($this.val());
// Find corresponding range values
lowMargin = parseFloat($this.closest('tr').find('[id^="low_margin"]').val());
highMargin = parseFloat($this.closest('tr').find('[id^="high_margin"]').val());
// Check bounds and add classes
if ((currentValue >= lowMargin) && (currentValue <= highMargin)) {
$this.addClass('green-check');
$this.removeClass('red-reject');
} else {
$this.addClass('red-reject');
$this.removeClass('green-check');
}
// Update button status
// 0 is falsey, any other value is truthy
if ($('.check-range.red-reject').length) {
// There are invalid parameters
$("#rejectbtn").removeClass('nodisp');
$("#acceptbtn").addClass('nodisp');
} else {
$("#acceptbtn").removeClass('nodisp');
$("#rejectbtn").addClass('nodisp');
}
})
.green-check {
background-color: green;
}
.red-reject {
background-color: red;
}
.nodisp {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_1' class='form-control' value='2'> Attr name </td>
<td><input type='text' name='qc_value[]' id='qc_value_1' class='form-control check-range'></td>
<td><input type='text' name='low_margin[]' id='low_margin_1' class='form-control' value='15' readonly></td>
<td><input type='text' name='high_margin[]' id='high_margin_1' class='form-control' value='20' readonly></td>
</tr>
<tr>
<td><input type='hidden' name='qc_attrb_id[]' id='qc_attrib_id_2' class='form-control' value='2'> Attr name </td>
<td><input type='text' name='qc_value[]' id='qc_value_2' class='form-control check-range'></td>
<td><input type='text' name='low_margin[]' id='low_margin_2' class='form-control' value='5' readonly></td>
<td><input type='text' name='high_margin[]' id='high_margin_2' class='form-control' value='25' readonly></td>
</tr>
</table>
<div class="text-center">
<button type="submit" class="btn btn-success btn-sm nodisp" data-toggle="tooltip" id="acceptbtn">send to finish stock</button>
<button type="submit" class="btn btn-danger btn-sm nodisp" data-toggle="tooltip" id="rejectbtn">reject the batch</button>
</div>
推荐阅读
- python - Python 请求拆分 TCP 数据包
- python - Vectorize Sequences 解释
- python-3.x - jwt python无法向用户添加令牌
- reactjs - gl-react 和 gl-react-native 多个图像,如贴纸
- ffmpeg - 为什么不同的ffmpeg运行会生成不同的文件?
- python - 如何调整和塑造子图?
- docker - 在 CentOS 上安装时找不到 Ceph
- webpack - 可以设置 webpack 以更新/跟踪更改的纱线包吗?
- vuejs2 - 用于组件的 Vuejs 转换 1 寻呼机
- c++ - 从大量文件中读取时出现段错误