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

获取提交表单的hte按钮 - 它必须在表单中或者触发提交表单的函数。请注意，您不需要＆＃34;？＆＃34;在操作url的末尾 - 当查询字符串附加到URL时，GET方法将添加它。您也可以使用keyup事件和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>

如果你想要它的形式，你可以创建一个onclick事件，然后触发表单提交（注意使用jQuery进行此操作） - 你通常会在JS中将它作为一个单独的onclick处理程序比html代码更好。

  <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>标签内。这将触发<button>根据指定的表单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>

提交按钮不搜索

2 个答案: