can't show correct button even when data value is incorrect

Question

• I have an interface which check for quality attributes for a particular production batch.
• I was able to get data from the back-end and shows in the frond-end.
• but couldn't implemented the what I wanted with the reject and accept submit button.
• firstly, when I enter some value within the range, value field input text becomes green and shows the "send to finish stock" button. instead what I want is display the "reject the batch" button. because other text inputs are not filled at yet.

• 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.

• when the all value text input field becomes green, I want to show the "send to finish stock" button.
• problem is, when I changes a particular value text input field, accordingly the reject or send to stock button shows.
• ex:- first enter incorrect value, it should shows "reject the batch" button, which is what I want.
• secondly, I enter correct value, it shows "send to stock" button, which is not what I want, and should display "reject the batch" button.
• if there any red input text fields, I want to show "reject the batch" button, instead of "send to stock" button, so this is where I'm getting stuck how to implement this.
  hopefully this makes sense

---

this is my html markup

<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>

---

this is my php code which display the form interface

<?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++;
        }

?>

---

this is the corresponding JavaScript code which check for those input values and display the "reject the batch" or "send to stock" button

    // 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.

Answer 1

You can check if any control in your form has the red-reject class and show your buttons accordingly.

A jQuery collection has a length property that you can use.

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.

// 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>