Show just one button when i check if at least one input is completed without show another button of the same class Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Show just one button when i check if at least one input is completed without show another button of the same class without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I want create function when i put anything in inputs (i’ve 6), will show one button search and when fields are empty, the same button will be hidden. Now, my problem is when i write, i get two button that i’ve declare in file .js and .jsp.(SEARCH and PROCEED).

I want a help just for this twice expressions:

<div class="button-row">
            <button class="btn btn-black" type="submit" name="search"><spring:theme code="multilogin.search.button"/></button>
        </div>

AND

<div class="button-row">
        <button class="btn btn-black" type="button" name="multiLogin"><spring:theme code="multilogin.button.login"/></button>
    </div>

You can find the code here –> 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,

Answer

You may do like that

if (hasValue === false) {
   $('button[name=search]').parent().hide();
} else {
   $('button[name=search]').parent().show();
}
We are here to answer your question about Show just one button when i check if at least one input is completed without show another button of the same class - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji