提交按钮未搜索答案

【问题标题】：Submit button not searching提交按钮未搜索
【发布时间】：2016-08-09 02:00:30
【问题描述】：

我正在尝试创建一个搜索框。如果您键入并按回车，它会搜索并工作。但是，我试图让一个按钮工作，以便在单击它时进行搜索。我在尝试实现这一点时遇到了麻烦，因为单击 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>

【问题讨论】：

您需要在标签之前包含按钮代码

标签： php html forms search button

【解决方案1】：

要获得提交表单的按钮 - 它必须在表单中，或者触发提交表单的函数。请注意，您不需要“？”在操作 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>

【讨论】：

【解决方案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>

【讨论】：