検索アイコンをクリックしたときに表示する検索ボックスを取得しようとしていますが、現時点で問題が発生しても検索が送信されます。検索ボックスを表示させるにはどうしたらいいですか？その時点で検索を実行しないでください。検索ボックスに何かを入力して[送信]をクリックすると表示されます。Jqueryをクリックして現在の検索入力ボックス
https://jsfiddle.net/9twxq1Lq/1/
<form class="search" method="post" action="/search">
<input type="text" name="criteria" placeholder="Search Box">
<button>
<i class="icons icon-search" aria-hidden="true"></i> <span class="sr">Search Box</span>
</button>
</form>
あなたは問題のカップルを持っています。最初にtype="button"属性をbuttonに追加して、フォームの送信を停止する必要があります。次に、その中のアイコンではなくボタンにイベントハンドラをアタッチする必要があります。最後に、jQueryがあなたのページに含まれていることを確認する必要があります。これは、フィドルの一部ではないためです。これを試してみてください：何typeがフォームで定義されていない場合
$('.search-button').click(function() {
$('.search input').toggle();
});.search input {
background-color: #FDFDFC;
background-color: rgba(255, 255, 255, .9);
box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, .14);
font-weight: 400;
font-size: .9em;
padding: .8em 1em .7em;
color: #252424;
}
.search input {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search" method="post" action="/search">
<input type="text" name="criteria" placeholder="Search Box">
<button type="button" class="search-button">
<i class="icons icon-search" aria-hidden="true"></i> <span class="sr">Search Box</span>
</button>
</form>これは注目されており、うまくいきます。しかし、私の検索ボックスが現れて、私はいくつかのテキストを入力すると、私は提出するための検索を得ることができません - まだそれがブラウザとしても、このjsfiddle https://jsfiddle.net/9twxq1Lq/1/の未処理の形式で、必要な検索機能を実行しています。 – me9867
この場合フォームを送信するには、別のボタンを使用する必要があります。フォームを表示するには 'type =" button "とフォームを表示するために' type = "submit"を使用します。 1つのボタンで実行することは可能ですが、意図した機能（つまり、表示または送信）を判断するためにJSロジックを使用する必要があり、検索入力を再び非表示にすることもできません。 –
これを送信するようにアドバイスしてもらえますか？クリックした後にボタンから送信するタイプを変更するだけですか（jqueryが動作しました）？ – me9867
buttonがsubmitボタンとして考えられています。フォームを提出したくない場合は<button type="button">を使用してください。
ボタンをクリックすると、フォームを送信しないようブラウザに指示します。また、JavaScriptが入力された場合にフォームを送信しないようにすることもできます。
return falseを返します。ここでは、送信フォーム – rahulsm
をjavascriptのボタンのonclickの内側に制限したいとします。add event.preventDefault（）;これにより、ボタンがデフォルトの動作をするのを防ぎます –