Home > front end >  Checking box values and disable button and show error message in Javascript
Checking box values and disable button and show error message in Javascript

Time：07-29

I need to make sure the value of a particular set of boxes should not exceed the value of other sets of boxes...

Set 1: Consultation fee, Other fee (total_fee will show the sum of these)

Set 2: cash, gpay, upi, card, others (total fee paid will show the sum of these)

The above action working pretty well...

Now, I want to make sure set 2 of total value should not exceed set 1 of total value. if so, I need to disable btn and also need to show an error message as "Sum of Receiving Payment exceeds Total Fee, Please Check!"...

How to do that?!

<html>

<head>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <style>
    .error-text {
      font-size: 14px;
      color: red;
      margin-top: 15px;
    }
  </style>


  <!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
  <script type="text/javascript">
    $(function() {
      const paid_cash = document.getElementById("paid_cash");
      const paid_gpay = document.getElementById("paid_gpay");
      const paid_upi = document.getElementById("paid_upi");
      const paid_card = document.getElementById("paid_card");
      const paid_others = document.getElementById("paid_others");


      const total_fee_paid = document.getElementById("total_fee_paid");

      document.getElementById("paid_cash").addEventListener("input", sum);
      document.getElementById("paid_gpay").addEventListener("input", sum);
      document.getElementById("paid_upi").addEventListener("input", sum);
      document.getElementById("paid_card").addEventListener("input", sum);
      document.getElementById("paid_others").addEventListener("input", sum);

      function sum() {
        total_fee_paid.value = Number(paid_cash.value)   Number(paid_gpay.value)   Number(paid_upi.value)   Number(paid_card.value)   Number(paid_others.value);
      }

    });
  </script>


  <!-- Total Fee Calculation from Consultation fee and Other fee-->
  <script type="text/javascript">
    $(function() {
      const fee1 = document.getElementById("visit_cons_fee");
      const fee2 = document.getElementById("visit_other_fee");
      const total_fee = document.getElementById("total_fee");

      document.getElementById("visit_cons_fee").addEventListener("input", sum);
      document.getElementById("visit_other_fee").addEventListener("input", sum);

      function sum() {
        total_fee.value = Number(fee1.value)   Number(fee2.value);
      }

    });
  </script>





  <script type="text/javascript">
    // access the button from the html
    const btn = document.getElementById("btnSubmit");

    // access input boxes total_fee, total_fee_paid
    const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
      document.getElementById("visit_cons_fee"),
      document.getElementById("visit_other_fee"),
      document.getElementById("paid_cash"),
      document.getElementById("paid_gpay"),
      document.getElementById("paid_upi"),
      document.getElementById("paid_card"),
      document.getElementById("paid_others")

    ];

    // a generic method to validate if prices indicate
    // that 'submit' button should be disabled
    // as well as render an error notification
    const validatePrices = () => {
      btn.disabled = ( visit_cons_fee.value    visit_other_fee.value <  paid_cash.value    paid_gpay.value    paid_upi.value    paid_card.value    paid_others.value);
      document.getElementById("error").innerText = ( visit_cons_fee.value    visit_other_fee.value <  paid_cash.value    paid_gpay.value    paid_upi.value    paid_card.value    paid_others.value ?
        'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
        ''
      );
    };

    // add event-listener to each input to invoke the validate method
    [paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
      box => {
        box.addEventListener('keyup', validatePrices)
      });
  </script>






</head>

<body>



  <div >

    <div >

      <div >
        <label ><b>Consulation Fees:</b><span >*</span></label><input type="number"  id="visit_cons_fee" name="visit_cons_fee" required min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>Other Charges:</b></label><input type="number"  id="visit_other_fee" name="visit_other_fee" min="0">
      </div>
    </div>

    <div >
      <div >
        <label ><b>Total Fee:</b></label><input type="number"  id="total_fee" name="total_fee" value="" disabled>
      </div>
    </div>



  </div>
  <hr/>
  <div >
    <div >

      <div >
        <label ><b>Payment by Cash:</b></label><input type="number"  name="paid_cash" id="paid_cash" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>GPay Payment:</b></label><input type="number"  id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>UPI Payment:</b></label><input type="number"  id="paid_upi" name="paid_upi" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>Card Payment:</b></label><input type="number"  name="paid_card" id="paid_card" placeholder="0" min="0">
      </div>
    </div>
    <div >

      <div >
        <label ><b>Other Payment:</b></label><input type="number"  name="paid_others" id="paid_others" placeholder="0" min="0">
      </div>
    </div>

    <div >
      <div >
        <label ><b>Total Paid Payment:</b></label><input type="number"  id="total_fee_paid" name="total_fee_paid" value="" disabled>
      </div>
    </div>


  </div>


  <div >

    <div >
      <div >
        <center>
          <div id="error" class='error-text'>Test</div>
        </center><br/><br/>
      </div>
    </div>
  </div>


  <div >
    <button id="btnSubmit" type="submit" >Add Visit</button>
  </div>



</body>

</html>

CodePudding user response：

Your logic seems good, but you call getElementById before DOM is ready, which means all elements are not available, and you try to call addEventListener to undefined elements.

To avoid that situation, you can add

$(document).ready(() => { //your logic })

Side note that I also improved your logic in validatePrices.

<html>

<head>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <style>
    .error-text {
      font-size: 14px;
      color: red;
      margin-top: 15px;
    }
  </style>


  <!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
  <script type="text/javascript">
    $(function() {
      const paid_cash = document.getElementById("paid_cash");
      const paid_gpay = document.getElementById("paid_gpay");
      const paid_upi = document.getElementById("paid_upi");
      const paid_card = document.getElementById("paid_card");
      const paid_others = document.getElementById("paid_others");


      const total_fee_paid = document.getElementById("total_fee_paid");

      paid_cash.addEventListener("input", sum);
      paid_gpay.addEventListener("input", sum);
      paid_upi.addEventListener("input", sum);
      paid_card.addEventListener("input", sum);
      paid_others.addEventListener("input", sum);

      function sum() {
        total_fee_paid.value = Number(paid_cash.value)   Number(paid_gpay.value)   Number(paid_upi.value)   Number(paid_card.value)   Number(paid_others.value);
      }
    });
  </script>


  <!-- Total Fee Calculation from Consultation fee and Other fee-->
  <script type="text/javascript">
    $(function() {
      const fee1 = document.getElementById("visit_cons_fee");
      const fee2 = document.getElementById("visit_other_fee");
      const total_fee = document.getElementById("total_fee");

      fee1.addEventListener("input", sum);
      fee2.addEventListener("input", sum);

      function sum() {
        total_fee.value = Number(fee1.value)   Number(fee2.value);
      }
    });
  </script>

  <script type="text/javascript">
    $(document).ready(() => {
      // access the button from the html
      const btn = document.getElementById("btnSubmit");

      // access input boxes total_fee, total_fee_paid
      const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
        document.getElementById("visit_cons_fee"),
        document.getElementById("visit_other_fee"),
        document.getElementById("paid_cash"),
        document.getElementById("paid_gpay"),
        document.getElementById("paid_upi"),
        document.getElementById("paid_card"),
        document.getElementById("paid_others")
      ];
      
      const total_fee = document.getElementById("total_fee");
      const total_fee_paid = document.getElementById("total_fee_paid");

      // a generic method to validate if prices indicate
      // that 'submit' button should be disabled
      // as well as render an error notification
      const validatePrices = () => {
        const invalid = Number(total_fee.value) < Number(total_fee_paid.value);
        btn.disabled = invalid;
        document.getElementById("error").innerText = invalid ?
          'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
          ''
      };

      // add event-listener to each input to invoke the validate method
      [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
        (item) => {
          item.addEventListener('keyup', validatePrices)
        });

    })
  </script>

</head>

<body>

  <div >
    <div >
      <div >
        <label ><b>Consulation Fees:</b><span >*</span></label><input type="number"  id="visit_cons_fee" name="visit_cons_fee" required min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>Other Charges:</b></label><input type="number"  id="visit_other_fee" name="visit_other_fee" min="0">
      </div>
    </div>

    <div >
      <div >
        <label ><b>Total Fee:</b></label><input type="number"  id="total_fee" name="total_fee" value="" disabled>
      </div>
    </div>



  </div>
  <hr />
  <div >
    <div >

      <div >
        <label ><b>Payment by Cash:</b></label><input type="number"  name="paid_cash" id="paid_cash" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>GPay Payment:</b></label><input type="number"  id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>UPI Payment:</b></label><input type="number"  id="paid_upi" name="paid_upi" placeholder="0" min="0">
      </div>
    </div>
    <div >
      <div >
        <label ><b>Card Payment:</b></label><input type="number"  name="paid_card" id="paid_card" placeholder="0" min="0">
      </div>
    </div>
    <div >

      <div >
        <label ><b>Other Payment:</b></label><input type="number"  name="paid_others" id="paid_others" placeholder="0" min="0">
      </div>
    </div>

    <div >
      <div >
        <label ><b>Total Paid Payment:</b></label><input type="number"  id="total_fee_paid" name="total_fee_paid" value="" disabled>
      </div>
    </div>


  </div>


  <div >

    <div >
      <div >
        <center>
          <div id="error" class='error-text'>Test</div>
        </center><br /><br />
      </div>
    </div>
  </div>


  <div >
    <button id="btnSubmit" type="submit" >Add Visit</button>
  </div>



</body>

</html>

CodePudding user response：

Here is a jQuery specific approach, it is a rework, but only because you are already loading the library. The only slight modifications to HTML being adding a class for payment specific fields as well as fee specific fields. This is a little more concise and readable, but ultimately, it is just another approach.

<html>

<head>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    .error-text {
      font-size: 14px;
      color: red;
      margin-top: 15px;
    }
  </style>
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <label ><b>Consulation Fees:</b><span >*</span></label><input type="number"
             id="visit_cons_fee" name="visit_cons_fee" required min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>Other Charges:</b></label><input type="number" 
            id="visit_other_fee" name="visit_other_fee" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>Total Fee:</b></label><input type="number"  id="total_fee"
            name="total_fee" value="" disabled>
        </div>
      </div>
    </div>
    <hr />
    <div >
      <div >
        <div >
          <label ><b>Payment by Cash:</b></label><input type="number" 
            name="paid_cash" id="paid_cash" placeholder="0" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>GPay Payment:</b></label><input type="number" 
            id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>UPI Payment:</b></label><input type="number" 
            id="paid_upi" name="paid_upi" placeholder="0" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>Card Payment:</b></label><input type="number" 
            name="paid_card" id="paid_card" placeholder="0" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>Other Payment:</b></label><input type="number" 
            name="paid_others" id="paid_others" placeholder="0" min="0">
        </div>
      </div>
      <div >
        <div >
          <label ><b>Total Paid Payment:</b></label><input type="number" 
            id="total_fee_paid" name="total_fee_paid" value="" disabled>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <div id="error" class='error-text'>Test</div>
        </div>
      </div>
    </div>
    <div >
      <button id="btnSubmit" type="submit" >Add Visit</button>
    </div>
  </div>
  <script>
    $(document).ready(function () {
      // store our payment fields in variables
      const $paid_cash = $("#paid_cash")
      const $paid_gpay = $("#paid_gpay")
      const $paid_upi = $("#paid_upi")
      const $paid_card = $("#paid_card")
      const $paid_others = $("#paid_others")

      // store our fee fields in variables
      const $fee1 = $("#visit_cons_fee")
      const $fee2 = $("#visit_other_fee")
      const $total_fee = $("#total_fee")

      // store our totals in variables
      const $total_fee_paid = $("#total_fee_paid")
      const $field_payment_type = $("input.field-payment-type")

      // function to sum our payment fields and display the total
      function sumPayments() {
        const payment_fields = [$paid_cash, $paid_gpay, $paid_upi, $paid_card, $paid_others]
        const total_fee_paid = payment_fields.reduce((a, b) => a    b.val(), 0)
        $total_fee_paid.val(total_fee_paid)
        validate()
      }

      // function to sum our fee fields and display the total
      function sumFees() {
        const fee_fields = [$fee1, $fee2];
        const total_fee = fee_fields.reduce((a, b) => a    b.val(), 0)
        $total_fee.val(total_fee)
        validate()
      }

      // function to validate our payment does not exceed our fee
      function validate() {
        const $btn_submit = $("#btnSubmit")
        const total_fee =  $total_fee.val()
        const total_fee_paid =  $total_fee_paid.val()
        let disabled = false
        let error = "&nbsp;"

        if (total_fee_paid > total_fee) {
          error = "Total paid amount cannot be greater than total fee"
          disabled = true
        }

        $("#error").html(error)
        $btn_submit.attr("disabled", disabled)
      }

      // add event listeners to our payment_type fields 
      $field_payment_type.on('input', sumPayments)
      $field_consult_fee.on('input', sumFees)
    });
  </script>
</body>

</html>

Page link：https//www.codepudding.com/frontend/492911.html

Prev:Angular input disable or enable
Next:How to mock a service with JEST (Angular Ts)
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding