Search button for Google Search


Topic: Search button for Google Search

Grf free asked 3 years ago

On my site there is a search option enter link description here If one clicks the search icon, a modal opens. By filling in a search term and pressing the 'enter' button, a search is performed and the results are shown, however is one presses the button 'zoeken', nothing happens. Am I overlooking something?

The code used is:

<div id="modalSearch" class="modal fade" tabindex="-1" role="dialog" aria-label="modalSearchTitle"  aria-hidden="true"> {* originaly was aria-labelledby (replaced all occurrences) *}
      <div class="modal-dialog modal-dialog-center" role="document">
        { * Modal content / modal needs to be on a different place than the section it's been called from * }
        <div class="modal-content" style="background-color: #5f8bb2;">
          <div class="modal-header">
            <h4 class="modal-title text-white">Zoek binnen Uisge Beatha</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="zoeken" enctype="multipart/form-data" method="get" style="color:white;">
              <input class="form-control"  type="text" id="zoekForm" name="q" placeholder="Geef zoekterm in" required>
              <input type="submit" value="Ga" formaction="zoeken" id="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1">
            </form>
          </div>
          <div class="modal-footer">
            {*<button class="btn btn-primary btn-rounded" id="modalSearchSubmit" type="submit">Zoeken</button>*}
            <button class="btn btn-primary btn-rounded" id="submit" value="Ga" formaction="zoeken" type="submit">Zoeken</button>
            <button class="btn btn-rounded float-left" data-dismiss="modal" aria-hidden="true">Sluit</button>
          </div>
        </div>
      </div>
    </div>

Question related to the above modal form, Google Search Engine has the option to show the populair search words. Therefor this piece is used:

 <div id="queries" class="deep-purple-text"></div>
 <script async defer src="https://cse.google.com/query_renderer.js"></script>
 <script async defer src="https://cse.google.com/api/partner-pub-xxxxxxxxxxxx:dxfo8gajmec/popularqueryjs?view=overall&callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>

If I add this in the above modal form's head or body, it gets me this error:

{ * Modal content / modal needs to be on a different place than the section it's been called from * }

Any idea how to fix this one as well?

Thanks!


Grf free answered 3 years ago

:) Thanks a lot! Did overlook that one.


Krzysztof Wilk staff answered 3 years ago

Now it works, thanks :D the problem is that your "Zoeken" button should be in <form> tags too. I moved it, It looks like that:

<form action="zoeken" enctype="multipart/form-data" method="get" style="color:white;">
          <input class="form-control"  type="text" id="zoekForm" name="q" placeholder="Geef zoekterm in" required>
          <input type="submit" value="Ga" formaction="zoeken" id="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1">
          <button class="btn btn-primary btn-rounded" id="submit" value="Ga" formaction="zoeken" type="submit">Zoeken</button>
        </form>

and it works. "Submit" buttons are handling forms, that actual they're in. Your button is out of your form, so it doesn't handling nothing. You can do what I above or make "onclick" event in js, that'll trigger the function (you must write it too) and handle this form.


Grf free answered 3 years ago

Hi,

I'd like to, however I can't get passed the login screen. The waiting circle keeps turning, but can't get in. Tried it a dozen times.

Could you please create the snippet. This is the code that's in place:

 <div class="form-group col-sm-3">
  <a href="#modalSearch" data-toggle="modal" data-target="#modalSearch" role="button" aria-disabled="true">
   Google seach
  </a>
 </div>
        <div class="modal-body">
          <h5 class="modal-title text-white">Populaire zoektermen</h5>
          <div id="queries" class="deep-purple-text"></div>
          <form action="zoeken" enctype="multipart/form-data" method="get" style="color:white;">
            <input class="form-control"  type="text" id="zoekForm" name="q" placeholder="Geef zoekterm in" required>
            <input type="submit" value="Ga" formaction="zoeken" id="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1">
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary btn-rounded" id="submit" value="Ga" formaction="zoeken" type="submit">Zoeken</button>
          <button class="btn btn-rounded float-left" data-dismiss="modal" aria-hidden="true">Sluit</button>
        </div>
      </div>
    </div>
  </div>

It seems difficult to explain the issue. Please go to my website website from a laptop, click on the search icon in the right hand upper corner, enter key word in the modal screen, and press (!!) the "Zoeken" button. That makes it much clearer than a snippet.

Thanks.


Krzysztof Wilk staff answered 3 years ago

Hello,

Can you put all of your code into snippet? I'm not sure why but this code doesn't work for me in Visual Studio Code ;/


Grf free answered 3 years ago

Gentle kick ;) (need 20 characters)


Bartłomiej Malanowski staff commented 3 years ago

Could you please provide us some more details? I'm afraid I don't get it


Grf free commented 3 years ago

If one enters a search term in the field, he has to press the 'enter' button. The button called 'Zoeken' doesn't have any effect to start the search action.

Does this clarify?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: Mac Book Pro
  • Browser: Firefox Developer
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes