当我检查是否至少有一个输入完成时显示一个按钮，当输入==null时隐藏相同的按钮

当我检查是否至少有一个输入完成时，我想显示一个按钮，当输入==null时，隐藏同一个按钮。这是我的文件。。。

ACC.multiLogin = {
_autoload: [
"inputField"
],
inputField: function(){
$("#multiLogin-search input").on('input', function(){
var input = false;
$("#multiLogin-search input.text-input").each(function(){
if($(this).val() != "" && $(this).val() != null) {
input = true;
$("#button-row").removeClass("d-none");
} else if($(this).val() == "") {
input = true;
//$("#button-row").removeClass("#button-row");
$("#button-row").addClass("d-none");
}
});
});
}
}

<!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 id="button-row" class='d-none'>
<button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
</div>
</form>

</body>
</html>

谢谢你的帮助。

将检查定义为箭头函数，并在输入中的每个keyup事件上调用。

在页面加载时，您可以调用该方法，也可以只使用.hide((，如下片段所示。

var showHideButton = () => {
let hasValue = false;
$("#multiLogin-search input.text-input").each(function(){
if ($(this).val()) {
hasValue = true;
}
});

if (hasValue === true) {
$('#button-row').show();
} else {
$('#button-row').hide();
}
}

// Check input values on key up
$("#multiLogin-search input.text-input").keyup(function() { 
showHideButton();
});

//To hide button on page load
showHideButton(); 
// OR SIMPLEY CALL $('#button-row').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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 id="button-row" class='d-none'>
<button class="btn btn-black" type="submit" name="search">Button</button>
</div>
</form>

</body>
</html>

请查看这些。如果输入不为空，则显示按钮JavaScript：如果输入字段为空，则隐藏按钮链接

这可以获取输入的id，并将其从隐藏更改为文本。

document.getElementById('myElement').type = 'text';

你也可以使用一些css从切换

display: none;

和

display: block;

相关内容

最新更新

热门标签：