当我检查是否至少完成了一个输入时只显示一个按钮而不显示另一个同类按钮

编程问答 2022-05-14

问题描述

我想在输入任何内容时创建函数（我有 6 个），将显示一键搜索，当字段为空时，将隐藏相同的按钮。 现在，我的问题是当我写的时候，我得到了两个按钮，我在文件 .js 和 .jsp.(SEARCH and PROCEED) 中声明。

我只需要这两次表达式的帮助：

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

和

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

你可以在这里找到代码 --> 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>

谢谢，

解决方法

你可以这样做

if (hasValue === false) {
   $('button[name=search]').parent().hide();
} else {
   $('button[name=search]').parent().show();
}
htmlhybrisjavascriptjquery