I want to hide my submit button without mouse click & show message.
当主要余额少于输入提取金额时。然后自动隐藏提交按钮并显示insufficient balance
的消息
网页代码:
<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 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框架。
我想你在寻找那个。
我基本上将您的主要余额设置为 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>
尝试在函数中添加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();
});
});
绑定多个事件以避免单击外部触发事件。
$("#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();
}
}
});
});
演示