[英]can't show correct button even when data value is incorrect
secondly, when I enter some non-range value in value text input field ,It shows the "reject the batch" button. 其次,当我在值文本输入字段中输入一些非范围值时,它显示“拒绝批处理”按钮。 which is what I want.
这就是我想要的。
problem is, I can't figure it, how to show the "reject batch button" when any one of the value text input field becomes red . 问题是,我无法弄清楚,当任何一个值文本输入字段变为红色时,如何显示“拒绝批处理按钮”。
<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 $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++; } ?>
// 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'); } }
I tried and can't figure out what I'm doing here wrong or what is missing in my code..if someone can give me insight how to figure this out It would be appreciated.. thanks. 我尝试过,无法弄清楚我在这里做错了什么或者我的代码中缺少什么......如果有人能给我一些洞察力如何解决这个问题我将不胜感激。谢谢。
You can check if any control in your form has the red-reject
class and show your buttons accordingly. 您可以检查表单中的任何控件是否具有
red-reject
类并相应地显示您的按钮。
A jQuery
collection has a length
property that you can use. jQuery
集合有一个可以使用的length
属性。
I changed your markup a bit to use event listeners instead of onChange
, it decouples the markup from the logic making it easier to maintain. 我稍微改变了你的标记以使用事件监听器而不是
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.