form gets submitted on choosing autocomplete option - javascript

I have a form where I am taking two parameters from user and submitting form on press of Go button as well as on press of Enter key.
But in textbox when user types one char , textbox shows results for auto-complete.
And if user uses arrow keys to navigate through options and presses enter on a particular auto complete result, for gets submitted before selection of that selected option.
I want that user should be able to go down using arrow key, hit enter when he gets his option among the autocomplete list shown. and then if he presses enter , the form should be submitted
Here is the code in jsp
<tr> <td>param1: <input type="text" id="param1" placeholder="PARAM(Required)" onKeydown="Javascript: if (event.keyCode==13) getData();"></td>
<td>Merchant ID: <input type="text" id="merchant" placeholder="Merchant ID(Optional)" onKeydown="Javascript: if (event.keyCode==13) getData();"></td>
<td><button class="btn" onclick="getData()" style="position:relative;">Go</button>
</td></tr></thead></table>
on press of enter key I am calling getdata function in JS which calls the servlet
How can I go about this?
Thanks

If you can, please share with us more information about the code that you are using, the plugin or framework, etc...
So far with the poor information you share, you can disable the form submission if the enter hit is focussed on the input where the autocomplete goes. This is an example with jQuery
HTML
<input type="text" id="myInput" />
Javascript
$(function() {
$("#myInput").keypress(function(e) {
var KeyCode = (e.keyCode ? e.keyCode : e.which);
if(code == 13) return false; // 13 is the code for enter
});
});
You can read more examples about event handling here: http://api.jquery.com/category/events/

Related

Can't Get Form to Submit Properly [duplicate]

The title speaks for itself... I have a couple of forms, one of them is just a single text input form and the other one is composed by two text inputs. I do not want any submit button in any of them, I want each form to submit whenever the user presses the ENTER button at any text input:
The form composed by just one input submits everytime the user presses the ENTER button - Perfect!
The second form composed by two text inputs does not behave this way, it does not submit when the user presses the ENTER button at any of both inputs.
Is there a way to make a form with more than one text input behave this way and avoid having a submit button in it?
Try adding this between the <form></form> tags
<input type="submit" style="display: none" />
Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, enter should automatically submit it, regardless of whether it's visible or not.
I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)
$('#username').keypress(function(event) {
if (event.keyCode == 13 || event.which == 13) {
$('#password').focus();
event.preventDefault();
}
});
Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.
I was looking for a solution to this problem and want to share my solution, based on many posts over here. (Tested on modern Chrome/Firefox/IE)
So, using only Javascript the follow code submits the form if ENTER key is pressed on any field or if the button Submit is pressed. After that it clear/reset the form, which is a nice thing to do.
Hope it helps.
<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<div onKeyPress="return myFunction(event)">
<form id="form01" action="demo_form.asp" onsubmit="return false;" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="myFunction(0)">
</form>
</div>
<script>
function myFunction(e) {
if((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted");
document.forms.form01.submit();
document.forms.form01.fname.value = ""; // could be form01.reset as well
}
}
</script>
</body>
</html>
Be sure that your inputs are inside "form" element and give the "form" element an "action" attribute.
You will have to look for the Enter key press. This post here shows how to do that.
Enter key press event in JavaScript
You can use the code below to submit a form after pressing Enter.
<input id="videoid" placeholder="Enter the video ID">
<button id="mybutton" type="button" onclick="myFunction()">Submit</button>
<script>
var input = document.getElementById("videoid");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("mybutton").click();
}
});
</script>

Flask/html - submit only one button on Enter key

I have folowing form:
<form method="post">
<input type="submit" name="submit" value="Save" class="button">
<input type="text" name="search_input" id="search_input">
<input type="submit" name="submit" value="Search" id="searchBtn" class="button">
</form>
Desired behavior is that when I enter some text to input field and hit Enter key, form shall post submit/Search and search_input.
Instead I get two separate posts:
request.form['submit'] =
ImmutableMultiDict([('submit', 'Save'), ('search_input', 'exampletext')])
ImmutableMultiDict([('search_input', 'exampletext'), ('submit', 'Search')])
I also tried to use following js, but the result is same:
var input = document.getElementById("search");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchBtn").click();
}
});
Do you have any idea, what's wrong and how to fix it?
From your js script i understand that you want the form to only click search and not save when you press the enter key?
If that is so then you need to change the name of the two buttons because form submit uses the name attribute to identify elements.
Since both your inputs have the same name you get two posts.
Edit: I just found out that the first submit in the form is clicked by default when you press the enter key (Without needing any js code), So in your case when you press the enter key the first button (Save) is pressed by default and from your js script the second button (Search) is pressed.
So you just have to put the search button on top of the save button and use CSS to change the order in the webpage

Form with multiple submit buttons, how to set the default enter key action - barcode scanner input

I've been stuck on this issue. I have a simple form:
<form>
<input type="text" name="barcode1">
<input type="submit" name="barcode1" value="Submit Barcode1">
<input type="text" name="barcode2">
<input type="submit" name="barcode2" value="Submit Barcode2">
</form>
I'm using a barcode scanner to enter the data into the text field. The scanner records a series of numbers, followed by a 'Enter' command.
When I scan into the barcode1 field, it works perfectly, the form is submitted by the scanner's 'Enter' command.
When I scan into barcode2 field, it submits the form using the barcode1 submit.
Is it possible, to change the default submit button on a form with multiple submit buttons? Perhaps I could set the default submit button when I focus on the text field for that submit button.
Something like this?
$(document).ready(function() {
var toClick;
$(":text").focus(function() {
toClick = $(this);
});
$('form').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
$(toClick).next('input[type="submit"]').click();
}
});
});
Fiddle

How to submit a form without action or submit button

I was looking at one image web site and was puzzled by the javascript they used. The web site has a image, below that there is a text input field you can input your comments. After you input your comments, you press the enter key to commit the comment.
The html looks like this:
<form class="-cx-PRIVATE-PostInfo__commentCreator" data-reactid=".0.1.0.0.0.2.2.1">
<input class="-cx-PRIVATE-PostInfo__commentCreatorInput" placeholder="Add a comment…" type="text" value="" data-reactid=".0.1.0.0.0.2.2.1.0">
</form>
There is no action in the form and no submit button. How can they submit the form?
The form's action attribute will default to the current URL.
Try filling in some text and hitting enter:
<form>
<input type="text" name="lookInTheUrlAfterHittingEnter" />
</form>
As #Traktor53 says, hitting enter whilst focus is on the text input will submit the form.
Input elements of type text (for a single line of text) have submitted their form if the enter key is pressed while filling them in since the year dot AFAIK. I did not find any mention of this in HTML5's documentation for this input type element.

HTML capture enter key and tab key

I want to prevent the enter key from submitting the form, I want it to act as a TAB key to just jump to the next field in the form or the next element.
Is this possible in HTML/JS?
if not possible to make the enter button act as a tab, is there a way to prevent the submission of the form and make only the form be submitted using the buttons on the HTML??
EDIT:
I have received a solution to this problem when I was asking for another problem!
here you can find the solution.
For accessibility/usability reasons, you really shouldn't prevent the Enter key from submitting the form (assuming the browser was going to do that anyway; IIRC, some older browsers didn't).
Assuming that you want to do this because the submit button has a click handler you'd like to happen for every form submission, you should instead move that code into a separate function and invoke it from a the form's submit event.
In jQuery, it would look something like:
$('#myForm').submit(function(e) {
if (!isValid()) {
e.preventDefault(); // Could also be `return false;` but I prefer preventDefault.
}
});
See the docs.
FYI, if you're trying to do some validation, you should check out the validation plugin.
<html>
<body>
<script>
function tmpFn(val){
if(event.keyCode=='13'){
if (val<4)
document.forms["yourform"].elements["box" + (val+1)].focus();
else
document.yourform.submit();
return false;
}
return true;
}
</script>
<body>
<form name="yourform" action="#">
<input type="text" name="box1" onkeypress="return tmpFn(1)"><br>
<input type="text" name="box2" onkeypress="return tmpFn(2)"><br>
<input type="text" name="box3" onkeypress="return tmpFn(3)"><br>
<input type="text" name="box4" onkeypress="return tmpFn(4)"><br>
<input type="submit" name="done" value="Submit">
</form>
</body>
</html>
EDIT: Refrain from using 'eval'.. Thanks Tim and Andy!
It might be possible to solve this using some jQuery - although I don't know how to imitate a keypress.
$(document).keyup(function(e) {
if(e.keyCode == 13)
{
//Code to imitate keypress of Tab key
}
});
Edit: Made a quick jsFiddle to "imitate" tab presses, which would go to the next field like you mentioned. (This one works based on the Enter key being pressed in a field)
jsFiddle
Off the top of my head, to prevent the enter button from submitting the form, don't use a submit button, rather use a <input type="button" ... onclick="submitForm();"> to call javascript to submit the form. I could be wrong, but I believe this should prevent pressing enter on any other element submitting the form.

Categories