送信ボタンが表示されない

Question

私は検索ボックスを作成しようとしています。入力してEnterキーを押すと、検索して動作します。しかし、ボタンをクリックして検索するようにボタンを取得しようとしています。私はimgがクリックされたときに何も起こっていないので、これを達成しようとするのに問題があります。

これはコードです：

<div class="large-8 small-9 columns"> 
        <form action='search.php?' method='GET' name='query' > 
         <input type='text' placeholder="Search Waves" id="searchbox" name='query'> 
        </form> 

       </div> 
       <div class="large-4 small-3 columns"> 
        <button id="search-button" name='query' type="submit"> 
        <img src="img/icon/Search.png" class="search-button" alt=""/> 

        </button> 
       </div> 

Answer 1

フォームを送信するために敬遠しがちボタンを取得する - それはither形態であってもまたは代わりにフォームを送信する機能を起動する必要があります。 「？」は必要ないことに注意してください。アクションURLの最後に - クエリ文字列がURLに追加されたときにGETメソッドがそれを追加します。また、キー入力イベントとajax経由でこれを行うこともできます。入力された入力の値に基づいてライブ検索が行われます。

<div class="large-8 small-9 columns"> 
      <form action='search.php' method='GET' name='query' > 
      <input type='text' placeholder="Search Waves" id="searchbox" name='query'> 

       </div> 
       <div class="large-4 small-3 columns"> 
        <button id="search-button" name='query' type="submit"> 
        <img src="img/icon/Search.png" class="search-button" alt=""/> 

        </button> 

       </div> 
      </form> 

あなたは（このアクションのためのjQueryの使用を注意してください）その後、フォームの送信をトリガするのonclickイベントを作成することができ、フォームのoustideそれを持っているしたい場合 - あなたは通常、JSでこれを持っているでしょうHTMLコードよりも分離されたonclickハンドラとして機能します。

<div class="large-8 small-9 columns"> 
      <form action='search.php' method='GET' name='query' > 
      <input type='text' placeholder="Search Waves" id="searchbox" name='query'> 
      </form> 
     </div> 
     <div class="large-4 small-3 columns"> 
      <button id="search-button" name="query" onclick="$('[name=query]').submit()"> 
      <img src="img/icon/Search.png" class="search-button" alt=""/> </button> 
</div> 

Answer 2

<form>タグ内にボタンを配置する必要があります。これにより、が指定されたフォームactionに従ってフォームを送信します。それ以外の場合、<button>はフォームの一部とはみなされません。これは送信されません。

<div class="large-8 small-9 columns"> 
    <form action='search.php?' method='GET' name='query' > 
     <input type='text' placeholder="Search Waves" id="searchbox" name='query'> 
</div> 

<div class="large-4 small-3 columns"> 
    <button id="search-button" name='query' type="submit"> 
    <img src="img/icon/Search.png" class="search-button" alt=""/> 
    </button> 
    </form> 
</div>