Form not submitting when there is more than one input text - forms

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().

Related

Possibility of a Form without a Submit Button

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>

Antd Form doesn't submit when there are more than one text input inside

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

iPhone selects a Shift key when focusing on a HTML input field. How to turn this off?

When I'm focus on an input field on an iPhone, the Shift key is turned on to make sure that the input starts with upper case. Is there a way to turn off this functionality and not have the Shift key when I focus on a field?
I understand why this might be good in some cases but in my case this is a user name or email field, most of which don't start with upper case letter.
Update: The answer lead me to Safari Web Content Guide page which I'll be referencing more often from now on.
You can solve it by setting autocapitalize as off
<input type="text" name="test1" autocapitalize="off"/>
and also Set the autocorrect attribute of your textbox as off to turn off the auto correct feature.
<input type="text" name="test1" autocorrect="off"/>
There is a proprietary attribute for that: autocapitalize (on/off)
<input type="email" name="username" autocapitalize="off">
Please note that this is not a W3C standard and will result in invalid code.

How do I keep track of when what is the text entered in the form when the user navigates away from the page?

I have a piece of code like this.
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
How do I keep track of when what is the text entered in the form's textarea when the user navigates away from the page? I want to prompt the user with a warning message so he/she doesn't lose the text.
Thanks.
You could use the javascript/jquery blur event, and if the user hasn't clicked the desired button have it display the form values. This might help JQuery Blur Validation Problem
Stu
Take a look at this Javascript code snippet:
http://www.boutell.com/newfaq/creating/disableclose.html
This takes advantage of the window's onbeforeunload event which fires when the user is about to leave the page.

DOM issue in Safari with buttons

I was wondering if anyone has seen this issue before.
I have two button on a webpage. When I navigate away from the page and hit the back button to return the value of one button is placed in the value of the other.
E.g
<input class="SmallData" type="submit" id="logButton" value="Log In" tabindex="93"></input>
<input class="btn" type="submit" id="acBtn" value="Detailed Quote"></input>
When I come back to the page Detailed Quote replaces Log In e.g.
<input class="SmallData" type="submit" id="logButton" value="Detailed Quote" tabindex="93"></input>
There is no JavaScript causing this to happen. I look at the source everything looks fine but I inspect the DOM I can see that the there is a different value.
Is there something about how web kit handles the dom that it gets corrupted when the back button is used?
Thanks,
Try giving each input element a name="some_unique_name" attribute -- see if that helps Safari differentiate.
Mght it be because of having two submit buttons...?
Just my "random" suggestion though... :)
Check if the same thing happens in Chrome (if you have access to a Windows box) to see if it's a WebKit issue or Safari itself.