forme html Même à deux endroits sur la même page

Question

Je suis en train de placer ce code dans deux endroits différents sur une page html et lui faire soumettre correctement quelle que soit la boîte, les types d'utilisateurs de la phrase:

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

le problème:

S'il y a deux formes alors la première forme présente de cette façon:

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

qui échoue.

La deuxième forme soumet ainsi:

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

Et les œuvres, mais est incorrect.

Comment puis-je réécrire les formes pour faire chacun unique afin que le bouton de recherche à côté de chaque entrée soit fait sous forme de soumettre comme ceci:

/search/results/?q=test 

Answer 1

Chaque forme a besoin d'un identifiant unique.

<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

Je voudrais simplement rendre les entrées de formulaire identiques et ne soumettre qu'une seule forme.

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