Hey so right now i have the code below that functions as a Ctrl+F search but within a search box. The website im using this on only have one code area so i need the code to function within the same one.
The code below does what i want it to do but at this moment we need to click on the search button the first time and then we can follow up with enter after that. What i want it to do is make it possible to accept the enter key from the start and at the same time have the button as an option.
Is this possible?
<!--BEGIN SEARCH BOX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="search_box">
<div><input id="search" type="textarea" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>
<div> </div>
<div>
<p>2019-11-11 - 2020-01-10 - Testing line 837<br />
PDF</p>
<p>2019-11-04 - 2019-11-24 - Testing 2, line 607, 627, 697<br />
PDF</p>
<p>2019-10-30 - 2019-11-29 - Testing 3, line 55, 75, 291<br />
PDF</p>
<p>2019-10-31 - 2019-11-04 - Testing 4, line 423,424<br />
PDF</p>
</div>
</div>
<!--END SEARCH BOX --><script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
You have indicated that you cannot use a form tag due to restrictions on your hosting system. I dare say that your company may need to look into that, but a workaround solution may be to catch the Enter keypress on your input, as described here: execute function on enter key
In your case this might look like this:
var searchbox = document.getElementById("search");
searchbox.addEventListener("keydown", function (e) {
if (e.keyCode === 13) { //checks whether the pressed key is "Enter"
checkInput();
}
});
Your input type is a textarea, so hitting Enter will be interpreted as creating a new line within that box. Change it to:
<input id="search" type="text" />
for a single line text field, and Enter will submit the form.
Which, by the way, you should probably enclose your inputs in, and change button type to submit:
<form onsubmit="checkInput()">
<input id="search" type="text" /> <input id="submit_form" type="submit" value="Sök" />
</form>
If i only use the following it works even if i have return set to true or false. It works almost perfectly, if i type anything in the box i need to click the button the first time and can then continue by clicking enter on my keyboard and it continues the search going down. I just have to click the button the first time and thats what annoys me :/
<div><input id="search" type="text" /> <input id="submit_form" onclick="checkInput()" type="button" value="Sök" /></div>
the "onclick" is what i want as onsubmit i guess but i cant just change that to onsubmit couse that will brake it.
Related
I have tried a bunch of different things as well as searching and googling but I just can't see how to make some very basic code work.Trying to let the user submit text input.
This code below should just change the first paragraph to say working.
<HTML>
<CENTER>
<BR>
<H1>Test</H1>
<BR>
<p id="ParaOne"></p>
<BR>
<input type="text" id="TextInput" Value="" onsubmit="Test">
<script>
var CharOne = ["name"]
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
document.getElementById("ParaOne").innerHTML = "Enter Name:";
</script>
</HTML>
Ideally I would able to save whatever they entered into a variable and then display the entered name but as of now I can't get anything to work. not even a basic function to update the paragraph to sy working.
There is no onsubmit event for the textbox. You can use that event on the form (which I don't see in your question). Although not required, I would also add a submit button, because that's a better design.
Also it's wasteful to assign an initial value to ParaOne in JavaScript, simply type the value inside the element.
<form onsubmit="Test();">
<p id="ParaOne">Enter Name:</p>
<input type="text" id="TextInput">
</form>
<script>
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
</script>
Important note: Although the code above is how you should do it, I don't really see the point. The form will be submitted immediately after changing the text of ParaOne which will reload the page and you will see the initial value again (and probably think it didn't work). It will work but very fast so nobody will really see it, so what's the point?
You can use the javascript methods onchange or onkeydown to trigger input from the input field, you don't need to submit a form. But in case you needed just that I added the example. I used jQuery instead of plain javascript to write the functions because now they practically become one-line functions.
onchange will wait for the user to press enter or for the input element to loose focus to call the function.
onkeydown will call the function on every key press.
e.preventDefault() cancels the default action of the element, which in this case is a submit action, and lets us make the decision through code whether to submit or not.
Below are some javascript/jQuery test functions and a sample HTML file so you can test out what works best for you.
EDIT: I added some examples on how to store the current value of an input field into a variable
// get the Value of input element directly into a variable
var myVariable = $('#theInput_1').val();
// myVariable will return empty string since the input element is empty
console.log('This is the starting value of the 1st input element: ' + myVariable);
// Function for onkeydown test
function testKeyDown()
{
// stored in a variable which is not available outside the function
var myVariable = $('#theInput_1').val();
$('#paraOne').text(myVariable);
// test output - $('#theInput_1').val() will return empty
console.log('This is the changed value of the 1st input element: ' + myVariable);
}
// Function for onchange test
function testOnChange()
{
$('#paraTwo').text($('#theInput_2').val());
}
// Function for submit test
$( "#submit" ).on( "click", function(e)
{
e.preventDefault(); // Prevents default action of submit
$('#paraThree').text($('#theInput_3').val());
});
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p id="paraOne">This text will be replaced on success.</p>
<input type="text" id="theInput_1" onkeydown="testKeyDown();" size="50" value="" placeholder="onkeydown test" />
<p id="paraTwo">This text will be replaced on success.</p>
<input type="text" id="theInput_2" onchange="testOnChange();" size="50" value="" placeholder="onchange test" />
<p id="paraThree">This text will be replaced on success.</p>
<form>
<input type="text" id="theInput_3" size="50" value="" placeholder="form submit test" />
<input type="submit" id="submit" value="Submit me" />
</form>
</body>
</html>
I've been racking my brain on this for a couple days. I've looked thru many different solutions, but I can't figure this out.
I have a simple form in a PHP page with a text box and search button that once the search is performed, the entered text is highlighted on the document.
PROBLEM: After entering a search term in the text box and CLICKing search, all is well. However, when I PRESS enter to search, it only fires ONCE. Clicking search will continue to work with no issues.
What am I doing wrong here?
$('document').ready(function() {
$('#button').click(function() {
var search = $('#text-search').val();
});
$('#text-search').keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) { //Enter key pressed
$('#button').on(); //Trigger search button click event
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search" class="Column">
<input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight">
<input name="searchit" id="button" type="button" value="Search" onClick="highlight()">
</div>
HTML:
You're doing it a bit wrong and you're putting too much overhead to your code. You can achieve the same without all these keypress events. The submit event will suffice and it works flawlessly with Enter as well! However, you need to wrap your inputs with form element and change input type from button to submit:
var searchbox = document.querySelector('#text-search')
var searchForm = document.querySelector('#search')
searchForm.addEventListener('submit', function(e) {
e.preventDefault()
highlight(searchbox.value)
searchForm.reset()
})
function highlight(value) {
// do something with your value
alert(value)
}
<form id="search" class="Column">
<input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight" />
<input name="searchit" id="button" type="submit" value="Search" />
</form>
Always try to use form element if you are getting user input. This gives you better control over input fields. Also it's semantically better than lonely inputs here and there.
Try to avoid inline javascript in your HTML. It's just a bad practice.
How to send enter from javascript to site?
What I real need is to send text to site like filehippo.com in search box, and press enter to search for those text.
So piece of code from site is:
<div id="searchbox">
<form name="f" action="/search">
<input style="color: #999" type="text" id="q" name="q" maxlength="150" value="Search..." onfocus="javascript:clearInputValue('q', 'Search...')" onblur="javascript:setDefaultIfEmpty('q', 'Search...')">
<input type="submit" id="search-submit" value="GO" onclick="javascript:submitQuery('q', 'Search...')">
</form></div>
And my simple code look like this:
javascript: document.getElementById('q').focus();document.getElementById('q').value='Winrar';document.getElementById('f').item(0).click();
And those script just put focus on search box and send text to them, but I need also to do automatically search (send enter), how to do that?
document.getElementById('f').item(0).click(); -> dont work
What I need is to simulate click of mouse, by enter, cause can't send click to element that work properly.
Is it possible to send enter with text?
Use document.f.submit(); to submit the form.
The problem is that there are multiple forms named 'f'
javascript:document.f[0].submit();
So the fully functional line would be:
javascript:document.getElementById('q').value='Winrar';document.f[0].submit();
Use onkeypress attribute of input element.
I am having two text boxes with a reset and a submit button. The reset button is working fine. But when i enter something in those two text boxes and press esc, the values gets disappeared. Event acts like a reset button. I am not sure how to control it. Much appreciate your help... Thanks...
<input type="text" name="" /> <input type="text" name="" />
<input type="button" value="Search" /> <input type="reset" value="Reset" />
It's working fine in all browsers http://jsfiddle.net/xgTxK/2/
$(document).keydown(function (e) {
if(e.keyCode==27){
e.preventDefault();
}
});
add above script in your code to prevent default functionality
I'm not sure if this is consistent across all browsers, but I've noticed esc button will typically reset the text typed in a text input, but only while still focused within the text input. Or to put another way, esc will reset the text if the onchange event hasn't occured yet.
And I would assume to prevent this would need to use JavaScript to capture the key events within the input and prevent the default behavior.
Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>
Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.
You need to put some <form></form> tags around the textbox and button. Like so
<form method='POST' onsubmit='javascript:goSearch();return false;'>
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>
Another way would be to use the keydown event on the textbox and check whether it was the enter key.
Hope this helps.
I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.
The best way would be to set an event to handle enter being pressed.
In jQuery you would do:
$("input_box_id").keydown(function(e){
if (e.keyCode == 13) //enter
{
$("btn-submit").click();
}
});
In JavaScript it would be:
document.getElementById("input_box_id").onclick = function(e){
var keycode =(window.event) ? event.keyCode : e.keyCode;
if (keycode == 13) //enter
{
document.getElementById("input_box_id").click();
}
};
And change Html to:
<form action="url_here" method="post">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>
Ignore the form tags if you've already got a Asp.net form.
Another way, instead of the onclick on the submit button, would be to do this.
<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>
Edit: Added action and method attributes. The action attribute is required for validation.
Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?
Can you past the contents of the goSearch() function?
What happens if you remove the "return false;" from the event handler for the submit?
When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.
EDIT: with new ASP information.
See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:
Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");
Old ticket, but I'd like to chime in: IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
There are a ton of "Enter not submitting in IE8" complaints out there, and I feel lots of them can be contributed to this behavior. I hope this helps some of them.