jqueryの自動送信ボタンを隠す

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

when main balance less then form input withdraw amount. Then automatic hide submit button and show message that insufficient balance

HTMLコード:

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

Jquery Code:

<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 framework を使用しています。

1
nl ru de
show()とhide()を別の方法で追加することができます。ブートストラップのhideクラスを追加し、addClass()とremoveClass()を使用してそれを削除することができます
追加された 著者 Devsi Odedra,
.hide().hidden()ではなく、値が文字列の場合は、 parseInt()を使用して整数にする必要があります。
追加された 著者 Mohamed-Yousef,

4 答え

関数に else を追加してみてください。

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

I think you looking for that.
i basically set your main balance to 20 and if input greater than 20, than submit button will hide. also you can add message in if or else condition as per your requeirements.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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">
      
<button type="submit" id="withdraw_button" class="btn btn-info btn-rounded w-md waves-effect waves-light m-b-5">Withdraw</button>
                    </div>
</div> </div>

1
追加された
今見ます。メッセージ用
追加された 著者 Devsi Odedra,
メッセージを表示するにはどうすればよいですか。
追加された 著者 Hasan Sheikh,
ありがとうございました。それはうまくいきます
追加された 著者 Hasan Sheikh,

あなたの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();
    });
 });
1
追加された
@HasanSheikh .blur をクリックすると、 .blur(function )を .on( 'input')に変更する必要があります。 、機能
追加された 著者 Mohamed-Yousef,
働く。しかし、サイトをクリックする必要があります
追加された 著者 Hasan Sheikh,
どのようにこれを遅らせることができます
追加された 著者 Hasan Sheikh,
@HasanSheikh:私の更新された答えをチェックしてください
追加された 著者 Saurabh Dhariwal,

イベントを発生させるために外側をクリックしないように複数のイベントをバインドします。

$("#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

0
追加された
PHP - 日本のコミュニティ [ja]
PHP - 日本のコミュニティ [ja]
4 参加者の

このグループではPHPについて話します。 パートナー:kotaeta.com

JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript