Topic: Search button for Google Search
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!
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.
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.
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 ;/
Gentle kick ;) (need 20 characters)
Bartłomiej Malanowski staff commented 4 years ago
Could you please provide us some more details? I'm afraid I don't get it
Grf free commented 4 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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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