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

Question

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");
                    }
                });
            });
        }
    }



 



            
                
                     Customer number 

                    
  

                
                
                     Country 

                    
  

                    
                
                
                     Postal Code 

                    
                    
  

                
            
            
                
                     Customer Name 

                    
  

                
                
                     City 

                    
  

                
                
                     Address

Thank you for helping.

user_1640693 · Answer

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();




 



            
                
                     Customer number 

                    
  

                
                
                     Country 

                    
  

                    
                
                
                     Postal Code 

                    
                    
  

                
            
            
                
                     Customer Name 

                    
  

                
                
                     City 

                    
  

                
                
                     Address

Admin · Answer

Please check out these. Show button if input is not empty and JavaScript: Hide button link if input field is empty

This can get the id of your input and change it to text from hidden.

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

You could also use some css to toggle from

display: none;

and

display: block;

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

2 Answers