Search code examples
javascripthtmljqueryjspsap-commerce-cloud

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

I want to show a button when I check if at least one input is completed and hide the same button when the input == null. This is my file...

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>

Thank you for helping.

Solution

  • Defined the checking as an arrow function and is called on each keyup event in the input.

    On page load you can either call the method or just use .hide() as shown below in the snippet.

     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>