同一页面上两个地方的相同 html 表单答案

【问题标题】：Same html form in two places on the same page同一页面上两个地方的相同 html 表单
【发布时间】：2015-05-13 16:04:03
【问题描述】：

我正在尝试将此代码放置在 html 页面上的两个不同位置，并且无论用户在哪个框中输入该短语，都可以正确提交：

<form id="search_form" action="http://example.com/search/results/" method="get">
    <label for="search"></label>

    <input autocomplete="off" id="search" name="q" value="" class="input-text" maxlength="128" type="text">

    <button type="submit" title="Search">
        <span><span>Search</span></span>
    </button>
</form>

问题：

如果有两个表单，那么第一个表单以这种方式提交：

/search/results/?q=test&q=

失败了。

第二个表单是这样提交的：

/search/results/?q=&q=test

并且有效但不正确。

如何重写表单以使每个表单都独一无二，以便每个输入旁边的搜索按钮使任一表单提交如下：

/search/results/?q=test

【问题讨论】：

确保您有唯一的 ID 和名称值，您应该没有问题。
你在哪个浏览器中测试这个？
@all 我发现了问题。该表格未正确关闭，因此初始表格正在进入下一个表格。重命名 ID 有效。

标签： html forms

【解决方案1】：

我只会使表单输入相同，并且只提交一个表单。

$('input[type=text]').on('change', function() {
  $('input[type=text]').val($(this).val()); 
})
$('input[type=submit]').on('click', function() {
  event.preventDefault()
  $('#form2').submit();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" namd="textbox" placeholder="form1">
  <input type="submit"/>
</form>
<form id="form2">
  <input type="text" namd="textbox" placeholder="form2">
  <input type="submit"/>
</form>

【讨论】：

【解决方案2】：

每个表单都需要一个唯一的 ID。

<form id="search_form1" action="http://example.com/search/results/" method="get">
    <label for="search"></label>

    <input autocomplete="off" id="search" name="q" value="" class="input-text" maxlength="128" type="text">

    <button type="submit" title="Search">
        <span><span>Search</span></span>
    </button>
</form>

<form id="search_form2" action="http://example.com/search/results/" method="get">
    <label for="search"></label>

    <input autocomplete="off" id="search" name="q" value="" class="input-text" maxlength="128" type="text">

    <button type="submit" title="Search">
        <span><span>Search</span></span>
    </button>
</form>

【讨论】：