如果单击提交，如何关闭输入

Question

所以我有一个带有 class 搜索的提交按钮，当点击时带有 class searchBar 的输入值是空的，然后 searchBar display:block 和不提交表格。但是，如果值仍然为空但再次单击提交（搜索），我希望能够关闭 searchBar。

$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
    $('.searchBar').css('display', 'block');
    return false;
} else {
  return true;
}
});

HTML:

 <form id="form" action="">
  <input value="" type="text" placeholder="Product name or ID" name="search" class="searchBar" />
  <input type="submit" readonly="readonly" class="search" />
</form>

CSS:

  #form .searchBar {
  display: none;
}

Answer 1

如果我对问题的理解是正确的，您可以切换搜索框的显示来实现您所需要的

 $('.searchBar').css('display', 'block'); // instead of this


 $('.searchBar').toggle(); // put this

Answer 2

根据你的代码我做了这样的事情

$('#form').submit(function() {
                if ($.trim($(".searchBar").val()) === "") {
                    $('.searchBar').show();
                    return false;
                } else {
                    return true;
                }
            });

#form #search {
                display: none;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form" action="" method="post">
            <input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
            <input type="submit" readonly="readonly" class="search" />
        </form>

如果喜欢可以查看这个例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>        
        <style>
            #form #search {
                display: none;
            }
        </style>
    </head>
    <body>
        <form id="form" action="" method="post">
            <input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
            <input type="submit" readonly="readonly" class="search" />
        </form>
        <script>

            $('#form').submit(function() {
                if ($.trim($(".searchBar").val()) === "") {
                    $('.searchBar').show();
                    return false;
                } else {
                    return true;
                }
            });
        </script> 
    </body>
</html>

Answer 3

如果我没看错你可以试试这段代码：

var countClick=0;
$('#form').submit(function() {
    countClick++;
    if ($.trim($(".searchBar").val()) === "") 
    {    
        if(countClick==1)
        {
            $('.searchBar').css('display', 'block');
            return false;
        }
        else
        {
            $('.searchBar').css('display', 'none');
            return false;
        }
    } 
    else 
    {
        return true;
    }
});

如果单击提交，如何关闭输入

How do I close the input if submit is clicked

javascript

jquery

frontend

web-deployment

web