I have a problem with submitting a input field. I know I am not the first one who ask this question but I looked at the answers and they didn't work.
I have an input field and a submit button inside a div. I have the code working so that you can search on button press but I can't get submitting on enter press working.
html:
<div class="search singers" action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/><input class="button" type="submit" value="Search" onclick="search();"/>
<div id="output" class="output">
</div>
</div>
Jquery code:
var link = '#search';
//post input
$(function(){
$(link).keydown(function(e){
if (e.keyCode == 13) {
$(link).submit();
//He detect an enter press but stops then
}
});
});
I found the Jquery code on this site
And here a similar question: here
problem sovled I came at the idea that I have a function that makes the ajax request to send the data to php. I now call that function on enter press.
Your form should be like this. You forgot the form tag in your code, and that's why the form won't submit.
<div class="search singers">
<form name='your form' action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search"/>
</form>
<div id="output" class="output">
</div>
</div>
And second thing your autonsan function like this
<script>
function autosug() {
alert("You you are here");
}
</script>
You need to use a form. So when you will press enter, then form will be submitted including input field value.
<div class="search singers">
<form action="templates/search/search_singer.php" method="POST">
<input name="search" type="text" id="search" placeholder="Search here for singers" onkeyup="autosug();" data-file="search_singers"/>
<input class="button" type="submit" value="Search" onclick="search();"/>
</form>
<div id="output" class="output">
</div>
</div>