Submitting a form on 'Enter' with jQuery only fires ONCE - javascript

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.

Related

How to submit form with enter press in html textarea

I want to submit form as soon as I hit enter in the text area, this was working fine with input type text but, I don't know how to do it with text area. I have to use text area as I want text input to be expandable, how can I make it work? Thanks
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="sendMessage(newMessageContent)">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<textarea id="typeMessageBox" placeholder="Write here and hit enter to send..." type="text submit" class="form-control-lg form-control" ng-model="newMessageContent"></textarea>
</form>
</div>
You can use ng-keypress and then check if keypress is equal enter then call to submit form function
On your textarea should be
<textarea ng-keypress="getkeys($event)" ng-model="newMessageContent"></textarea>
Then your angular code shold be
$scope.getkeys = function (event) {
if(event.keyCode == 13){
$scope.sendMessage( $scope.newMessageContent );
}
}
You can use the following jQuery code to submit your form when hitting Enter in your textarea:
$("#typeMessageBox").keypress(function (e) {
if (e.which === 13 && !e.shiftKey) {
e.preventDefault();
$(this).closest("form").submit();
}
});
That said, it may not be a good idea. If you want an expandable field, that surely is because you'll have several lines of text, therefore almost certainly a line break.
I would highly encourage you to add a helptext stating that you WILL submit the form when entering Enter, as your users would be very surprised by this behavior.
Even better: don't try to change native behaviors. A textarea is working like this for a good reason, and everybody is used to it. Changing its behavior may seem a good idea to you, but you'll probably loose your users.

How to add enter?

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.

How to trigger button click when press enter key outside of input controls

I have several html input controls on a page and a search button. When user is outside the input controls, ( ie focus is not inside the input control) and if user press enter, i want to trigger click event of search button. The search button is not a Submit button and it is not inside a form
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
currently I am doing this
$(document).keypress(function (event) {
if (event.keyCode === 13) {
$("#btnSearch").click();
}
})
However, the above code triggers click event every time user clicks enter.
Some of the input controls I have are custom autocomplete controls. Auto complete control shows multiple options as soon user starts typing something. Then user can select the option by using mouse or by pressing enter.
I don't want to trigger the click event of a search button when user press enter to select an option.
Just make sure that the autocomplete element isn't the source of the enter press. From the demo you give in your question, this will work. However, if it is slightly different in your use case, you may need to adjust the class name or selector to make sure it is preventing the correct target element
$(document).keypress(function (event) {
if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) {
$("#btnSearch").click();
alert('btnSearchClick');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
Alternatively, since events propagate out, if you can prevent the propagation of the autocomplete event in whichever library you are using, that may work as well.

How can I disable the normal submit on enter behavior on a text input and replace it with a function of my own?

I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).
I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.
How to get whether the Enter is pressed?
$('input.the-one-text-input').keydown(function(e) {
if(e.keyCode == 13) { // enter key was pressed
// run own code
return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
}
});
Also note this comment on that page:
** If anyone has reached this from Google (like I did), know that "keyup" instead of "keypress" works in Firefox, IE, and Chrome. "keypress" apparently only works in Firefox.
Which isn't 100% correct anymore, since it also works works in Chrome. However it wouldn't surprise me if it still doesn't work in IE.
http://jsfiddle.net/yzfm9/9/
Basically check which input is focused and do custom stuff depending on it
HTML
<form id="nya">
username <input type="text" id="input_username" /><br/>
email <input type="text" id="input_email" /><br/>
hobby <input type="text" id="input_hobby" /><br/>
<input type="submit" />
</form>
JS
$('#nya').submit(function() {
var focusedId = ($("*:focus").attr("id"));
if(focusedId == 'input_email') {
// do your custom stuff here
return false;
}
});
Returning false when enter is pressed on "onkeydown" will disable the default behaviour. Then you can just call your function on the "onkeyup" event.
<input type="text"
onkeyup="myFunction()"
onkeydown="return event.keyCode != 13;"/>
Just had a play with jQuery's .keypress() method and it looks like it does the job.
HTML
<form method="post" action="">
<input type="text" name="submit1" id="submit1" />
<input type="text" name="noSubmit1" id="noSubmit1" />
<input type="text" name="submit2" id="submit2" />
<input type="submit" />
</form>​
JQuery
​$('#noSubmit1​​​​​​​​​​​​​​​').keypress(function(event) {
if (event.which == 13 ) {
event.preventDefault();
}
});​​
It basically adds a keypress event to the correct input field, then checks for which key was pressed. If it was the enter button (13), it then prevents the default action (form submission) from happening. See it in action here: http://jsfiddle.net/cchana/UrHz7/2/

IE8 - Enter key won't submit my search field

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.

Categories