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

Question

我想在检查是否至少有一个输入完成时显示一个按钮，并在输入 == 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>

感谢您的帮助。

Answer 1

请检查这些。 Show button if input is not empty 和

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

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

您还可以使用一些 css 从

切换

display: none;

和

display: block;

Answer 2

将检查定义为箭头函数，并在输入中的每个 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>

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

show a button when i check if at least one input is completed and hide the same button when the input == null

html

javascript

jquery

jsp

hybris