I have a simple example where for some reason form stops calling onSubmit callback if I add more than one text inputs and push 'Enter' key while one of the inputs is focused.
Here is a link on CodePen: https://codepen.io/anon/pen/KePXOj?&editors=001.
This one works:
<Form onSubmit={(e)=>{e.preventDefault(); console.log(e)}}>
<Input/>
</Form>
And this doesn't:
<Form onSubmit={(e)=>{e.preventDefault(); console.log(e)}}>
<Input/>
<Input/>
</Form>
What am I doing wrong there?
This doesn't seem to be an antd issue, it is a known quirk that forms with only a single input fire onsubmit when pressing enter while if they have multiple inputs they do not.
This might be related
Related
hope You all have a great day.Here I'm trying to create a form without submit buttons,but when press enter on the text-box the whole text-box gonna hide.why is this is happening?,is it actually possible to create a form without a submit button or is that is a mandatory thing?,thanks for Your valuable time.
<form >
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
When you hit 'enter' it submits the form.
I believe this is a natural part of a 'form' behavior for accessibility. Input inside of a form is meant to be data the user sends or inserts somewhere which is likely the reasoning behind this.
You can add to the Html form onsubmit="return false" or return preventDefault() as an event handler / function with other handling code you may want to provide.
Try this:
<form onsubmit="return false;">
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
<form name="form1" class="newsletter relative color_default button_in_input" action="process.php" method="post">
Hi trying to submit this form but its not doing anything at all. just stays there all the time.
You need to close the form and ensure that the submit button is within the <form></form> tags.
Hi I have a following html markup
<h2>First Name Last Name</h2>
<form>
<div>
<input name="fname">
<input name="lname">
</div>
</form>
You click on a header to show the form fields and to edit them (blur hides the fields and shows the header again).
I have a problem because the first and last name are in the same header, so you click on one item to edit two fields.
I am submitting the form on a blur event for the input fields but when I click the last name, because blur is being called in the first name, I cannot edit the second field.
I am using AngularJS which is also presenting a problem because I cannot figure out which element is focused because document.activeElement returns the entire body.
Any help is much appreciated!
Assuming you're using ngBlur directive on the input element, you can mix it with ngFocus to keep elements visible as wanted: <input name="fname" ng-focus="showFields=true;" ng-blur="blurField($event);" >
Using a function for ngBlur, you will have access to the $event object which in turn will expose the elements you need (like target or related). Afterwards, you can trigger form submit depending on your needs.
A demo plunker is HERE.
This is a quite simple issue to describe. This was tested on Firefox (3.6), IE (8) and Chrome (8).
Here is the file doesnotsubmit.html
<form>
<input />
<input />
</form>
When the focus is on one of the input and you press enter, nothing happens.
Below is the file doessubmit.html
<form>
<input />
</form>
When the focus is on the input and you press enter, the form is submitted.
Any insight on this inconsistent behavior ?
I know the form lacks a submit button, and thus is not semantically correct. Anyway, the submit process was meant to automatically be handled through jQuery dialogs buttonpane's buttons, and I wouldn't know how to place an additional <input type="submit" />.
user754151 is correct. This is a known bug but i guess you can get rid of it just intercepting the enter keypress event.
There are two possible solution for this issue.
The simplest solution is to add 1 more input field which will not visible to user.
you can bind the keydown event of that input field, and in that function just check keyCode == 13 then preventDefault().
I am having a problem when submitting a form.
Here is the situation
<form ....>
<input type="text" id="ajax"> <img onclick="saveTextBox">
<input type="text">
<input type="text">
<input type="text">
</form>
In the above form when the img is click on I call an Ajax script to save the button.
That's OK.
What I need is when I am focus on textbox Ajax call ajaxscript (without click img).
I add an jQuery to manage key=13 and call the script BUT the problem is that run the Ajax script AND submits the form too.
How can I override the form sumit when I am focus on Ajax text box and hit enter key?
First. Scrap the image and replace it with a real submit button.
Then. Handle all the JS interaction in the onsubmit event for the form element. Cancel the default action, so that the JS runs and the normal form submission doesn't (when JS is available).
In short: be pragmatic, build on something that works, and intercept events at the right moment. Don't ignore the primary purpose of an element and create an entirely new way to trigger something it does already.
Return false.
Sample event function that will stop the submit event:
function submitHandler() {
// do ajax stuff here
return false;
}