投稿がクリックされた場合、入力を閉じるにはどうすればいいですか？

クリッククラスを使用した場合、検索クラスのサブミットボタンが表示され、searchBarクラスの入力値が空の場合、searchBarの表示：blockとdoesn 'フォームを提出してください。しかし、値がまだ空だが、サブミット（検索）が再びクリックされた場合、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; 
}

出典

2016-09-01 Samuel Gray

申し訳ありませんが、私はあなたが誰かのために十分な情報を提供したとは思わないoあなたを助けることができる。 htmlで完成したデモは、大いに役立ちます。 – Moritur

@Moriturがhtmlを追加しました。 –

質問の私の理解が正しければ、あなたは

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


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

を必要とするものを達成するために検索ボックスの表示を切り替えることができます

出典

2016-09-01 09:44:07 Senthilnathan

はい！どうもありがとうございます！ –

便利な回答。。 –

コード私はあなたが私は右を理解している場合は、コードのこの部分を試すことができます

<!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>

出典

2016-09-01 09:49:18

が好きな場合は、この例を確認することができ、この

$('#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>

のようなものを行っている。

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

出典

2016-09-01 09:51:30

投稿がクリックされた場合、入力を閉じるにはどうすればいいですか？

答えて

関連する問題