[英]Automatic hide submit button in jquery
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框架 。
尝试在函数中添加else
:
if (input_amount > main_balance) {
//When insinuation balance then hide button automatic
$('#withdraw_button').hide();
alert('Insufficient balance!');
}else{
$('#withdraw_button').show();
}
请更新您的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();
});
});
我认为您正在寻找。
我基本上将您的主要余额设置为20,如果输入大于20,则“提交”按钮将隐藏。 您也可以根据自己的要求在条件中添加消息。
$(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 mb-5">Withdraw</button></center> </div>
绑定多个事件,以避免在外部触发事件。
$("#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();
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.