Question

我正在尝试将此代码放在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

Answer 1

每个表单都需要一个唯一的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>

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在同一页面上的两个地方使用相同的html表单

2 个答案: