javascript - 在jquery中自动隐藏提交按钮

Question

 I want to hide my submit button without mouse click & show message.

当主余额小于表单输入取款金额时。 然后自动隐藏提交按钮并显示消息余额不足

HTML代码:

  <div id="message"></div>
   <div class="form-group">
      <center><button type="submit" id="withdraw_button" class="btn btn-info btn-rounded w-md waves-effect waves-light m-b-5">Withdraw</button></center>
                    </div>

J查询代码:

<script type="text/javascript">
$(document).ready(function(){
var main_balance  = $("#main_balance").val();

$('#withdraw_amount').blur(function(){
var input_amount = $(this).val();
if (input_amount.length != 0) {
  if (input_amount > main_balance) {

      // When insinuation balance then hide button automatic

       $('#withdraw_button').hidden();

       // Show message 
       // how can i see it

    }    
   }
  });
 });

如何解决这个问题。目前我使用 laravel 框架。

Answer 1

我想你正在寻找那个。
我基本上将您的主要余额设置为 20，如果输入大于 20，则提交按钮将隐藏。您也可以根据您的要求在 if 或 else 条件下添加消息。

$(document).ready(function(){
var main_balance  = 20;

$('#withdraw_amount').keyup(function(){
var input_amount = $(this).val();
if (input_amount.length != 0) {
  if (input_amount > main_balance) {

      // When insinuation balance then hide button automatic

       $('#withdraw_button').hide();

       // Show message 
        $('#message').html('insufficient balance');
       // how can i see it

    } else {
     $('#withdraw_button').show();
     $('#message').html('');
     }
   }
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message"></div>
   <div class="form-group">
   <input type="number" name="withdraw_amount" id="withdraw_amount">
      <center><button type="submit" id="withdraw_button" class="btn btn-info btn-rounded w-md waves-effect waves-light m-b-5">Withdraw</button></center>
                    </div>