CODEWITHSUNDEEP
htmlforms
JMC
JMC

Reputation: 1697

Same html form in two places on the same page

I'm trying to place this code in two different places on an html page and have it submit properly regardless of which box the user types the 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>

The problem:

If there are two forms then the first form submits this way:

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

Which fails.

The second form submits this way: 

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

And works but is incorrect.

How can I rewrite the forms to make each one unique so that the search button next to each input makes either form submit like this: 

/search/results/?q=test

Upvotes: 0

Views: 2790

Answers (2)

aahhaa
aahhaa

Reputation: 2275

I would just make form inputs the same, and submit only one form.

$('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" name="textbox" placeholder="form1">
  <input type="submit"/>
</form>
<form id="form2">
  <input type="text" name="textbox" placeholder="form2">
  <input type="submit"/>
</form>

Upvotes: 2

whoacowboy
whoacowboy

Reputation: 7447

Each form needs a unique 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>

Upvotes: 1

Related Questions