же форма HTML в двух местах на той же странице

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

Каждая форма требуется уникальный идентификатор.

<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

Я бы просто сделал входные данные формы одинаковыми и представил только одну форму.

$('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>