I have the following form.
<form id='form'>
<input type='email' id='email' />
etc. etc.
</form>
So if I type 'hello' into the email field and press submit, I get an error and it stops the submit from happening. The input field then has a red border. Also, I override the submit so that it submits it using AJAX.
If I want to reset the form (using JS), I call:
$('#form')[0].reset();
This resets the form, but leaves the red border.
I try inspecting the element of the input field but it doesn't show any additional classes, but it has a red border? Is this a phantom class or something.
Related
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
Question: Is it possible to take the information from one field in a form and save it in a static list when a button/link is clicked without submitting the form or changing the data in any of the other inputs. Could I use AJAX for something like this?
Background: I want the users to be able to add multiple phone numbers. So they can enter the number in an input click "Add Number" and that input would be empty and the number that was there is now static in an html <li>. When the user clicks the submit button all of those numbers in the static list will be passed with the rest of the data.
The thing I am having the most problem with is when the user clicks "Add Number" the whole form is submitted to the action page.
What is happening: Both buttons submit the form to the action.cfm page.
My code example:
//Code in header that should run if the first button is clicked
<cfif StructKeyExists(form,"add_number">
This is where I would take the phone number and have it put it into a html list
</cfif>
<cfform action="action.cfm" method="post" enctype="multipart/form-data">
<cfinput type="text" name="phone_number">
<cfinput type="button" value="Add Number" name="add_number"/>
//The button below should not run the logic in the header and only send the user to action.cfm
<cfinput type="submit" value="Submit Current Order" name="submit"/>
</cfform>
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 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.