Search button for Google Search

Topic: Search button for Google Search

Grf asked 5 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!

Add comment

Grf answered 5 years ago

0 0 Best answer

Gentle kick ;) (need 20 characters)

Bartłomiej Malanowski staff pro premium commented 5 years ago

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

Grf commented 5 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?

Add comment

Krzysztof Wilk staff answered 5 years ago

0 0 Best answer

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

Add comment

Grf answered 5 years ago

0 0 Best answer

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.

Add comment

Krzysztof Wilk staff answered 5 years ago

0 0 Best answer

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.

Add comment

Grf answered 5 years ago

0 0 Best answer

:) Thanks a lot! Did overlook that one.

Add comment