Flask/html - submit only one button on Enter key - javascript

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

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>

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

Difference between form.submit() and having an input with type of "submit"

I have a HTML page containing a form. I want to make some fields "required". The problem is that I'm not using a <input type="submit"> in my form, instead, I use a Javascript function to submit the form because I need to send a Javascript variable to my server. Here is my code:
<form action="/toServer">
Username: <input type="text" name="usrname" required>
<input type="button" onclick="submitForm(this.form)" value="Submit">
</form>
var submitForm = function(frm){
var qstNbr = document.getElementById('hiddenField');
qstNbr.value = someJsVariable;
frm.submit();
}
So, Even is I have the required attribute in my input but the form is still being submitted even if I don't enter anything in the input.
Here is a JSFiddle of how I want my form to behave when clicking on the button without entering anything.
Anyone knows how form.submit() is different from having an <input> of type="submit" ?
EDIT: After following user2696779's answer and doing a little modification, here's the final working code:
<form action="/toServer">
Username: <input type="text" name="usrname" required>
<input type="submit" onclick="submitForm(this.form)" value="Submit">
</form>
var submitForm = function(frm){
if (frm.checkValidity()) {
var qstNbr = document.getElementById('hiddenField');
qstNbr.value = someJsVariable;
frm.submit();
}
}
Your current HTML input button isn't a submit type, it's a button type. The requred attribute on your input element is therefore ignored. To change this, change your button's type to submit:
<input type="submit" value="Submit">
Browsers which support the required attribute will now display a warning when the button is clicked:
JSFiddle demo.
Submitting using javascript will not trigger any validation. If you want to submit using a regular button + javascript and still have validation, you may use HTML5's checkValidity function to verify form fields, or the entire form.
For example, using JQuery:
if(!$('form')[0].checkValidity()) {
alert('not valid');
}
else {
$('form').submit();
}
See fiddle for working example: http://jsfiddle.net/8Kmck/2/

How do you determine which submit was used to submit a form with jQuery?

Keep in mind that the user does NOT have to click the submit nput. They could tab over to it and push enter.
So considering all ways a form can be submitted, how can you determine which one was used to submit the form inside the submit event. I have different names on the two submit elements.
Any action that triggers a submit button — be it an actual mouse click or some keyboard action — still triggers a "click" event and still causes the input to be included as a form parameter.
That is, if you see a form parameter with your input field's name and value, you know that that submit button was clicked.
edit — if the form submit happens because you hit "Enter" in a text field, the browser picks the first submit button (I think; that seems to be what Firefox does at least). (Wait; scratch that; Firefox seems to find the next "submit" input after the element that had focus when "Enter" was pressed ...)
Thus:
<form action='whatever' method='post'>
<input type='text' name='text'>
<input name='submit1' value='submit1' type='submit'>
<input name='submit2' value='submit2' type='submit'>
</form>
Hitting "Enter" in the text field would result in "submit1=submit1" being a form parameter, as would hitting "Enter" when "submit1" had focus. Tabbing to "submit2" and hitting "Enter" would result in "submit2=submit2" being among the parameters.
In either case, only one of the "submit" inputs shows up in the parameter list.
Instead of using different names, use different values, e.g:
<input type="submit" name="submit" value="Submit A">
<input type="submit" name="submit" value="Submit B">
You can also use buttons instead of inputs if you'd like the labels to be different from the values.

How do I detect how a form was submitted via JavaScript?

I have a form with multiple submit buttons and I'm listening for the 'submit' event via JavaScript. I want to know which submit button or form field (if the user pressed 'Enter/Return') triggered the submit event. Is there a way to get the HTML element that the user clicked on or pressed 'Enter/Return' in?
Update since people aren't understanding me:
This is via JavaScript before the form is submitted. No server-side detection allowed. I also need to handle the form being submitted via the user pressing Enter or Return.
Code
<form action="" method="POST">
<input type="text" name="first_name">
<input type="text" name="item">
<input type="submit" value="Add item">
<input type="submit" value="Submit">
</form>
Clicking 'Add Item' or pressing Return/Enter inside name="item" will add another form field.
Final Note
As far as I can tell, there isn't a way to detect which form field triggered a form submission. If you need to prevent submitting a form that has multiple buttons and/or from Enter/Return, you'll need to use <input type="button"> and bind event handlers to the form fields you want to stop form submission from.
If you have multiple submit buttons, the way you can tell is by giving each of them a unique name attribute, like this:
<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>
The one that is focused is sent along with the form submit, so if you clicked the one with a name of "submit2", that would come through in the form POST (or GET). If enter is hit, the first button in the source (in this case submit1) is considered the default and is sent along. You could set it to display:none to use as a dummy for detecting whether enter was pressed vs actually clicking a submit button.
EDIT:
In response to your comments, to capture the enter key getting pressed in certain elements you can do this with jQuery.
Note, you'll need to give first_name and add_item id attributes, and turn add_item into a type="button" instead of type="submit".
HTML:
<form action="" method="POST">
<input type="text" name="first_name"/>
<input type="text" id="item" name="item"/>
<input type="button" id="add_item" value="Add item"/>
<input type="submit" value="Submit"/>
</form>
JS:
$("#item").keydown(function(event){
if(event.keyCode == 13) {
addFields();
event.preventDefault();
event.stopPropagation();
}
});
$("#add_item").click(function(event) {
addFields();
});
You could set the onclick event on each element you are interested and call a javascript function with a different parameter for each element clicked.
From that function you send the idendifier of the button to the server side as a parameter
Just put a different name on each submit button, whichever one was clicked will be submitted (i.e. its name/value pair) with the form. Forms have worked like this since the begining of (WWW) time.
If the form is sumitted by enter or other keypress, no the first submit button name/value pair will be submitted.
Edit
Re-reading your question, you may want to determine how the form was submitted before it is sent. A click listener on the form can remember the last submit button clicked, but in Firefox, pressing enter in an input dispatches a fake click on the first submit button so you can't detect it.
I think you can't do it reliably other than using the basic method suggested above or Jordan's hidden submit button. If you say why you need to do this, perhaps more help can be provided.
here's an option if you don't mind using jQuery:
example: http://jsfiddle.net/U4Tpw/
use something like
$('form').submit(function() {
// identify the form by getting the id attribute
handleWhichForm($(this).attr('id'));
});

Categories