代码之家 › 专栏 › 技术社区 › proghasan

jquery中的自动隐藏提交按钮

laravel ajax jquery php javascript

proghasan · 技术社区 · 6 年前

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

当主余额小于时,则形成输入提取金额。然后自动隐藏提交按钮并显示 insufficient balance

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>

jQuery代码:

<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框架 .

4 回复 | 直到 6 年前

Devsi Odedra 6 年前

我想你在找那个。
我基本上把你的主余额设置为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>

Kapitan Teemo 6 年前

尝试添加 else 在您的职能范围内:

if (input_amount > main_balance) {
   //When insinuation balance then hide button automatic
   $('#withdraw_button').hide();
   alert('Insufficient balance!');
}else{
    $('#withdraw_button').show();
}

user10186369 6 年前

请更新您的jquery

<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').hide();

       // Show message 
       // how can i see it

    } else {
        $('#withdraw_button').show();
    }
   }
  });
    $('body').click(function(){

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

Uttam Kumar Roy 6 年前

绑定多个事件以避免单击外部触发事件。

$("#withdraw_amount").bind("keyup change", function(e)

这是你修改的代码

$(document).ready(function(){
    var main_balance  = Number($("#main_balance").val());

    //$('#withdraw_amount').keyup(function(){
    $("#withdraw_amount").bind("keyup change", function(e) {
        var input_amount = Number($(this).val());
        if (input_amount.length != 0) {
            if (input_amount > main_balance) {
              // When insinuation balance then hide button automatic
               $('#withdraw_button').hide();
               $('#message').text("insufficient balance");
               // Show message 
               // how can i see it
           } else {
                $('#message').text("");
                $('#withdraw_button').show();
           }   
        }
    });
});

demo