当我检查是否至少有一个输入完成时只显示一个按钮而不显示相同的另一个按钮 class
Show just one button when i check if at least one input is completed without show another button of the same class
我想在输入中输入任何内容时创建函数(我有 6 个),将显示一个按钮搜索,当字段为空时,相同的按钮将被隐藏。
现在,我的问题是当我写的时候,我得到了两个按钮,我已经在文件 .js 和 .jsp.(SEARCH and PROCEED).
中声明了
我只需要两次表达式的帮助:
<div class="button-row">
<button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
</div>
和
<div class="button-row">
<button class="btn btn-black" type="button" name="multiLogin"><spring:theme code="multilogin.button.login"/></button>
</div>
您可以在这里找到代码 --> https://jsfiddle.net/fm1y5c8v/1/
inputField: function(){
// $("#multiLogin-search input").on('input', function(){
var showHideButtonSearch = () => {
let hasValue = false;
$("#multiLogin-search input.text-input").each(function(){
if ($(this).val()) {
hasValue = true;
}
});
if (hasValue === false) {
$(".button-row").hide();
} else {
$(".button-row").show();
}
}
// Check input values on key up
$("#multiLogin-search input.text-input").keyup(function() {
showHideButtonSearch();
});
//Hide button search on page load
showHideButtonSearch();
// });
}
<!DOCTYPE html>
<html lang="en">
<body>
<form id="multiLogin-search" class="d-none">
<div class="column">
<div class="text-input-wrap">
<p> Customer number <p>
<p> <input class="text-input" type="text" name="customerCode" > <p>
</div>
<div class="text-input-wrap">
<p> Country <p>
<p> <input class="text-input" type="text" name="country" > <p>
</div>
<div class="text-input-wrap">
<p> Postal Code <p>
<p> <input class="text-input" type="text" name="postalCode" > <p>
</div>
</div>
<div class="column">
<div class="text-input-wrap">
<p> Customer Name <p>
<p> <input class="text-input" type="text" name="customerName" > <p>
</div>
<div class="text-input-wrap">
<p> City <p>
<p> <input class="text-input" type="text" name="city" > <p>
</div>
<div class="text-input-wrap">
<p> Address <p>
<p> <input class="text-input" type="text" name="address"><p>
</div>
</div>
<div class="button-row">
<button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
</div>
</form>
<div class="button-row">
<button class="btn btn-black" type="button" name="multilogin"><spring:theme code="multilogin.search.button"/></button>
</div>
</body>
</html>
thnx,
你可以这样做
if (hasValue === false) {
$('button[name=search]').parent().hide();
} else {
$('button[name=search]').parent().show();
}
我想在输入中输入任何内容时创建函数(我有 6 个),将显示一个按钮搜索,当字段为空时,相同的按钮将被隐藏。 现在,我的问题是当我写的时候,我得到了两个按钮,我已经在文件 .js 和 .jsp.(SEARCH and PROCEED).
中声明了我只需要两次表达式的帮助:
<div class="button-row">
<button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
</div>
和
<div class="button-row">
<button class="btn btn-black" type="button" name="multiLogin"><spring:theme code="multilogin.button.login"/></button>
</div>
您可以在这里找到代码 --> https://jsfiddle.net/fm1y5c8v/1/
inputField: function(){
// $("#multiLogin-search input").on('input', function(){
var showHideButtonSearch = () => {
let hasValue = false;
$("#multiLogin-search input.text-input").each(function(){
if ($(this).val()) {
hasValue = true;
}
});
if (hasValue === false) {
$(".button-row").hide();
} else {
$(".button-row").show();
}
}
// Check input values on key up
$("#multiLogin-search input.text-input").keyup(function() {
showHideButtonSearch();
});
//Hide button search on page load
showHideButtonSearch();
// });
}
<!DOCTYPE html>
<html lang="en">
<body>
<form id="multiLogin-search" class="d-none">
<div class="column">
<div class="text-input-wrap">
<p> Customer number <p>
<p> <input class="text-input" type="text" name="customerCode" > <p>
</div>
<div class="text-input-wrap">
<p> Country <p>
<p> <input class="text-input" type="text" name="country" > <p>
</div>
<div class="text-input-wrap">
<p> Postal Code <p>
<p> <input class="text-input" type="text" name="postalCode" > <p>
</div>
</div>
<div class="column">
<div class="text-input-wrap">
<p> Customer Name <p>
<p> <input class="text-input" type="text" name="customerName" > <p>
</div>
<div class="text-input-wrap">
<p> City <p>
<p> <input class="text-input" type="text" name="city" > <p>
</div>
<div class="text-input-wrap">
<p> Address <p>
<p> <input class="text-input" type="text" name="address"><p>
</div>
</div>
<div class="button-row">
<button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
</div>
</form>
<div class="button-row">
<button class="btn btn-black" type="button" name="multilogin"><spring:theme code="multilogin.search.button"/></button>
</div>
</body>
</html>
thnx,
你可以这样做
if (hasValue === false) {
$('button[name=search]').parent().hide();
} else {
$('button[name=search]').parent().show();
}