I tried to search when press enter, here I use livesearch.js for searching but this js always search when typing. I want it search when press enter. So iI tried change but still not working.
Framework js
<script type="text/javascript" src="framework/liveSearch/livesearch.js"></script>
HTML
<input type="text" id="livesearch" class="livesearch" style="margin-top:0;"/>
<div class="searchresult" id="liveRequestResults"></div>
<iframe id="mainResult" src='log-list.php'></iframe>
Javascript
<script>
$('#livesearch').keydown(function(e) {
if(e.keyCode == 13) // I tried this code, first enter worked, after that back to search when typing
{
liveReqInit('livesearch','liveRequestResults','log-ls.php','','mainResult'); //this search work when typing
}
})
</script>
From what I understood, you want a normal search box. This is going go submit the value to your backend(which I assume is log-ls.php).
<form action="log-ls.php">
<input type="search" placeholder="Search..." name="search">
<button type="submit" value="Submit">Submit</button>
</form>
Related
For some reason I can't find any similar problems online. The form is structured like this answer suggests- Getting iPhone GO button to submit form
Here is the form-
<form id="searchForm" method="get" action="">
<input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
<datalist id="searchList">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
</datalist>
<button type="submit" name="search" ></button>
</form>
When any option is selected and the input is updated with the new value, the iPhone keyboard submit does not work unless there is an additional key press before pressing the submit.
I was updating the datalist with javascript and thought that may be the issue but after hardcoding the above values the problem persists. Strangely sometimes the iPhone keyboard submit would work but I could not tell what the difference was.
I have tried changing autocomplete to on. I have tried putting an extra space after the option value. I have some ideas with javascript but would like suggestions before I spend too much time on the wrong approach.
iPhone version 12.4.1 and 14.4.1 and 14.7.1
*update-
I tried implementing a javascript solution without success. The search/go submit only works if the user presses an additional key after selecting from the datalist. Using javascript to trigger a key press did not work. Iphone go/search works on other sites with datalists. Not sure what to try next.
Hey, below solution worked for me to make work the search button on the phone keyboard:
<form id="searchForm" method="get" action="">
<input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
<datalist id="searchList">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
</datalist>
<button type="submit" name="search" id="myBtn" ></button>
</form>
.
.
.
<script>
var input = document.getElementById("searchTerm");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>
I added a js script at the end to trigger button click on enter and my search button on Iphone keyboard worked with the selected option on datalist.
I am trying to build a page that would allow a user to input text into a text field and hit enter on their keyboard and it would return the top 10 Wikipedia entries with that text.
Currently, my concern is that the page refreshes every time it fetches the JSON. I attempted the e.preventDefault() method, as I read about on other questions, but it isn't working. Can someone help me understand why this auto-refresh is happening, and how to fix it? Thank you.
Here is my HTML:
<div class="container-fluid">
<form action="#">
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
</div>
<div class="main"></div>
</div>
And here is my Javascript:
$(document).ready(function() {
$("#search").on("keyup", function(e) {
// attempt to prevent page refresh
e.preventDefault();
// if key pressed is "enter"
if (e.keyCode == 13) {
// retrieve user input
var search = document.getElementById("search").value;
// build Wikipedia API url
var request = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + search + "&format=json&callback=?";
$.getJSON(request, function(json) {
var x = json.query.search[0]["snippet"];
$(".main").html(x);
});
};
});
});
Here's a link: https://codepen.io/lieberscott/pen/RLVaGE
Because you submit the form (pressing enter does that). The form submits to the current page which looks like a reload.
<form id="searchform>
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
$('#searchform').on('submit', function(e){
e.preventDefault();
// your magic here.
});
The preventDefault stops the key UP, but by that time, you've already started submitting. The poreventDefault stops the enter getting input as text (you can check this with a textarea). If you'd change it to a letter, say A, you'd type the A, but not see it.
You can also remove the form itself, keeping just the input, if that doesnt create other issues, resulting in less HTML, which is nice.
Remove <form> tag from your HTML.
You are using a form and on enter/return it will try to submit the form.
Unless there is a button type="submit" or input type='submit' remove the form and use only input
<div class="container-fluid">
<input id="search" name="query" onkeyup="" type="text"></input>
</div>
<div class="main"></div>
</div>
so i have 2 buttons
<button type="submit" name="print">print</button>
<button type="submit" name="search">search</button>
beside the button search there is a textbox
<input type="text" name="txtSearch" autofocus>
now what i want to do is whenever I press enter i'd like to submit using the button search. but what happens is the button print is always getting submitted because it is on top of button search. I cant put button search on top of print because of the design. Is it possible to do it in php? or do I need javascript? i'm just starting to program and trying to learn more. thank you very much for the help!
You can't do that with php , you should use javascript or jquery .
add an id for your search input like this :
<button id='search' type="submit" name="search">search</button>
then you can use this code in jquery :
$('#search').keydown(function(e) {
var key = e.which;
if (key == 13) {
$('#your-form').submit();
}
});
You can...
Separate into two forms:
<form>
<button type="submit" name="print">print</button>
</form>
<form>
<button type="submit" name="search">search</button>
<input type="text" name="txtSearch" autofocus>
</form>
Or change the print button to:
Print or
<button type="button">print</button>
Or you could put your search button first, and use float or some kind of position:absolute and margin-top CSS.
Or use JavaScript, as Parsa suggests.
<class="searchform">
<input type="text" id="textbox" placeholder="Search..." checkbox_test(this.value);">
<input type="submit" id="button" class="classname" onClick="javascript:checkbox_test();">Search</a>
I have a custom search engine with checkbox options. I have a script called "checkbox_test" that will grab the text from the textbox and run the search query plus additional options selected with checkboxes.
The problem I have is that when I press 'Enter' nothing happens, I have tried many examples from stackoverflow and examples I found on the internet but it does not seem to work for me. Any ideas how to solve this problem?
Basically I want to run the javascript when the visitor presses enter (with and without focus)
You've got a markup error there. That's probably why nothing you try is happening.
Try the following:
<input type="text" id="textbox" placeholder="Search..." onkeypress="checkbox_test(this.value);">
HTML:
<body onkeypress="wasEnter(event)">....
Javascript:
function wasEnter(e) {
if (e.keyCode == 13) {
// here you can do your stuff
}
}
I am trying to work out a way of making A return function as a tab or vice versa. When the user scans the barcode it moves to the next text field then on the last field it submits the form. Really of sure of this and jquery/ JavaScript to make it happen!
The default behavior of barcode scanners is to input the characters followed by "enter." If you meant you want the scanner to move to the next field instead, you can block the enter with something like:
<form method="post">
<input type="text" name="barcode" id="b1" />
<input type="text" name="otherfield" id="b2" />
<input type="submit" id="submit" />
</form>
<script type="text/javascript">
$('#b1').keydown(function(e){
if (e.keyCode == 13) { // barcode scanned!
$('#b2').focus();
return false; // block form from being submitted yet
}
});
</script>