Is there a way where I can disable my button "Insert" when error appears?

Question

Newbie here. Hello, my target is when error shows up (Not enough balance), the INSERT button will be disabled. I have a input type number whose value must be less than equal to the current wallet, If it's greater than, then error will appear. I have provided the snippet below.

SCRIPT:

$( document ).ready(function() {
   
 $("#box").keyup( function(){
    var betAmount = $("#box").val();
    var walletAmount = 500; // your session data goes here 

    var remainingAmount = walletAmount - betAmount;


    $("#betAmountResult").text(remainingAmount >=0 ? remainingAmount : 'Error, not enough balance');
 })
});

 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>


<form method="POST" action="<?php echo base_url();?>auth/form_validation">

<input type="number" placeholder="Enter Amount" name="bet" class="form-control" id="box" required>


  <!-- change id's name to betAmount -->
    <p>CURRENT WALLET:   <a style="color:blue;">500</a></p>

    <p class="remaining">REMAINING BALANCE:
     
      <a class="p-1" id="betAmountResult"></a></p>

      <input type="submit" name="insert" value="Insert">
       
    </div>
   
    </form>

deepak · Answer 1 · 2020-12-16T07:20:47.953

$(document).ready(function() {

  $("#box").keyup(function() {
    var betAmount = $("#box").val();
    var walletAmount = 500; // your session data goes here 

    var remainingAmount = walletAmount - betAmount;


    if (remainingAmount >= 0) {
      $("#betAmountResult").text(remainingAmount);
      $("#insert").attr('disabled', false);

    } else {
      $("#insert").attr('disabled', true);
      $("#betAmountResult").text('Error, not enough balance');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>


<form method="POST" action="<?php echo base_url();?>auth/form_validation">

  <input type="number" placeholder="Enter Amount" name="bet" class="form-control" id="box" required>


  <!-- change id's name to betAmount -->
  <p>CURRENT WALLET: <a style="color:blue;">500</a></p>

  <p class="remaining">REMAINING BALANCE:

    <a class="p-1" id="betAmountResult"></a>
  </p>

  <input type="submit" id="insert" name="insert" value="Insert">

  </div>

</form>

mplungjan · Accepted Answer · 2020-12-16T07:35:25.247

Like this

.prop("disabled",not enough)

.prop() vs .attr()

or to remove

.toggle(enough)

I added an ID to the button to access it directly

I also use .on("input" which is more generic (handles paste for example)

$(function() {
  $("#box").on("input",function() {

    const betAmount = $("#box").val(),
          walletAmount = 500, // your session data goes here 
          remainingAmount = walletAmount - betAmount,
          enough = remainingAmount >= 0;
          
    $("#betAmountResult").text(enough ? remainingAmount : 'Error, not enough balance');
    $("#insert").prop("disabled",!enough); // disable
    
    // $("#insert").toggle(enough); // remove
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>


<form method="POST" action="<?php echo base_url();?>auth/form_validation">

  <input type="number" placeholder="Enter Amount" name="bet" class="form-control" id="box" required>


  <!-- change id's name to betAmount -->
  <p>CURRENT WALLET: <a style="color:blue;">500</a></p>

  <p class="remaining">REMAINING BALANCE:

    <a class="p-1" id="betAmountResult"></a>
  </p>

  <input type="submit" name="insert" id="insert" value="Insert">

  </div>

</form>

Hello. I'm just a newbie. I can't accept 2 given codes that's why i checked the first one. But i'm deciding which one to use. I just checked it to close the thread. Hope you won't feel negative about it. Thank you. All solutions are helpful. — Dark, Dec 16 '20 at 07:34
Sure. Just wanted you to know my opinion. I try to give you the best code I can write to educate you while answering. — mplungjan, Dec 16 '20 at 07:36
Thank you MP. Really help. And if i missed something, i'm sorry. Thanks for educating me. :D — Dark, Dec 16 '20 at 07:38

Is there a way where I can disable my button "Insert" when error appears?

2 Answers2