Member Avatar for azapovjednik

Hello all,
I would like to make a simple search input field... something like google search on top of the screen when you sign into your gmail account.. you can see it hereClick Here

Because I had troubles trying to achieve it... I came up with a funny semi solution... you can see the code:

as you can see, I had to put two buttons after the input text... first one is to drop down the form for more advanced search... but... when I type in some text in input field and press enter... the drop form is shown instead of firing the second submit button...

is there any other way to accomplishing a similar search form?

Thank you in advance!

  • 2 Contributors
  • 1 Reply
  • 554 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Masterblank

Dani AI

Generated

The behavior described by (pressing Enter opens the advanced toggle instead of running the search) is almost always caused by the toggle button being treated as a submit control. By HTML rules a plain <button> inside a form defaults to type="submit". was right to put everything inside one <form>, but the toggle also needs to be explicitly non-submitting.

A minimal, robust pattern (keeps the quick search and an advanced panel in one form):

<form id="searchForm" action="/search" method="get" class="form-inline">
  <div class="input-group">
    <input type="search" name="q" class="form-control" placeholder="Search">

    <div class="input-group-append">
      <!-- toggle must NOT submit -->
      <button id="advToggle" type="button" class="btn btn-secondary" aria-expanded="false">
        ▼
      </button>

      <!-- primary submit -->
      <button id="searchSubmit" type="submit" class="btn btn-primary">
        Search
      </button>
    </div>
  </div>

  <div id="advancedPanel" class="collapse"> ...advanced fields... </div>
</form>

For extra robustness (detect which control initiated submit), use event.submitter with a fallback to document.activeElement in the form submit handler:

form.addEventListener('submit', function(e){
  var by = e.submitter || document.activeElement;
  // by.id === 'searchSubmit' => normal search
  // otherwise handle accordingly
});

Troubleshooting tips: ensure the toggle has type="button" (avoid onClick="return false;" as a primary fix), keep the visible primary action as an actual type="submit", or split quick-search into its own form if it must hit a different endpoint. Also manage focus/aria-expanded when opening the advanced panel so keyboard users get predictable behavior. Combining 's single-form layout with the type="button" toggle resolves the Enter-key issue in nearly all browsers.

Member Avatar for Masterblank

I made some changes in your code.

you must enclose all the input in only one <form> element.
I think this will work

    <div class="container">
        <div class="row">
            <form class="form-horizontal">   <!-- START FORM -->      
            <div id="pretraga_div" class="col-sm-3 col-md-3 pull-right">
               <div class="input-group glyph">
                 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">

                 <div class="input-group-btn">
                      <button id="ikona" class="btn btn-default" onClick="return false;"><i class="glyphicon glyphicon-chevron-down"></i></button>
                      <button id="dugme" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> Search</button>
                 </div>
               </div>
            </div>
            <div id="test" class="col-lg-5 col-sm-5 izleti_djavle">
                <span id="iksic" class="glyphicon glyphicon-remove"></span>
                    <fieldset>

                    <legend>Advanced search</legend>
                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_username">Username</label>
                      <div class="controls">
                        <input id="search_username" name="search_username" type="text" placeholder="username" class="input-medium">
                      </div>
                    </div>

                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_fname">First name</label>
                      <div class="controls">
                        <input id="search_fname" name="search_fname" type="text" placeholder="First name" class="input-medium">
                      </div>
                    </div>

                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_lname">Last name</label>
                      <div class="controls">
                        <input id="search_lname" name="search_lname" type="text" placeholder="Last name" class="input-medium">
                      </div>
                    </div>

                    <!-- Button -->
                    <div class="control-group">
                      <label class="control-label" for="search_button"></label>
                      <div class="controls">
                        <button id="search_button" name="search_button" class="btn btn-primary pull-right">Search</button>
                      </div>
                    </div>

                    </fieldset>
                </div>  <!-- END TEST DIV -->             
            </form> <!-- END FORM --> 

            <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a. </p>
                </div>
                        <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a.</p>
                </div>
                        <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a.</p>
                </div>

        </div> <!-- END ROW -->
    </div> <!-- CONTAINER END -->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.