Submit button not searching - php

Question

I' trying to create a search box. If you type and hit enter, it searches and works. However, I'm trying to get a button to work so that when it is clicked it searches. I'm having trouble trying to achieve this as nothing is happening when the img is clicked.
This is the code:
<div class="large-8 small-9 columns">
<form action='search.php?' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</form>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</div>

Answer 1

to get hte button to submit the form - it has to ither be in the form or alternatively trigger a function that submits the form. Note that you do not need the "?" at the end of the action url - the GET method will add it when the query string is appended to the URL. You could also do this with a keyup event and via ajax- have a live search based on the value of the typed input.
<div class="large-8 small-9 columns">
<form action='search.php' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</div>
</form>
if you want to have it oustide of the form you can create an onclick event that will then trigger the form submission (note the use of jQuery for this action) - and you would normally have this in the JS as a separated onclick handler raher than in the html code.
<div class="large-8 small-9 columns">
<form action='search.php' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</form>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name="query" onclick="$('[name=query]').submit()">
<img src="img/icon/Search.png" class="search-button" alt=""/> </button>
</div>

Answer 2

You need to place the button within the <form> tags. This will trigger the <button> to submit the form according to the specified form action. Otherwise, the <button> will not be considered part of the form, this it's not submitted.
<div class="large-8 small-9 columns">
<form action='search.php?' method='GET' name='query' >
<input type='text' placeholder="Search Waves" id="searchbox" name='query'>
</div>
<div class="large-4 small-3 columns">
<button id="search-button" name='query' type="submit">
<img src="img/icon/Search.png" class="search-button" alt=""/>
</button>
</form>
</div>