I am trying to upload the two fields plus a file from react to backend express. But I don't know why if I put the value={statement} into the form, when I selected the file, after clicked "open" the file, nothing shows in the browser, but after I removed the value={statement}, "open" the file and the filename is showed.
The thing is how can I reference value after submitting the form?? If I removed the value, there is a network error showing 400.
<div className="control">
<input
type="file"
className="input"
value={statement}
onChange={changeHandler}
placeholder="Bank Name"
/>
Thanks,
Jo
It ends up that I placed the placeholder there when the input type ='file'
Related
I have a very simple form in my react application to fetch the user credit card information as follows.
<form autocomplete="on">
<input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
<input name="cc-exp-month"/>
<input name="cc-exp-year"/>
<input name="cc-exp"/>
</form>
I also tested in a "react-way"
I want the browser (safari in this case) to show the credit card options like the image below.
Interesting fact:
I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above).
However, if I run npm run build and serve the ./build folder the credit card options don't show up.
That's what I still don't understand, why the same code works in one way but it doesn't work in another way?
PS1: I'm testing in both cases with HTTPS.
PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.
your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
https://greenido.github.io/Product-Site-101/form-cc-example.html
I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.
If both of them is working for you then you please compare them with your html.
As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>
An example of proper payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
just as a reminder i would like to add here
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
For example for CC
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
requestAutocomplete()
Read here:
https://developer.chrome.com/multidevice/requestautocomplete-faq
https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
https://blog.alexmaccaw.com/requestautocomplete
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
For Autofill to work on iOS safari, the page has to be served over HTTPS and the certificate should not be a self-signed one. It has to be one given a valid CA.
Hope this helps
Faced the same issue, check safari preferences
Make sure you are not using private mode or any other visitor account!
I am not able to type anything into the below input text, which has been created using reactjs
<input type="text" id="txtName" className= "form-control" value=""/>
and the equivalent html code in browser is as below
<input id="txtName" class="form-control" value="" data-reactid=".0.0.0.1.0.1.0.1.1" type="text">
I am not able to fix this for some time, finally I changed the data-reactid attribute manually in the browser.
After I changed the value of data-reactid manually in the browser, I am able to type characters into the input field.
I have many other screens with text input field, which has no such issues.
how to fix this issue? why this issue occurs, I mean what's the issue with data-reactid attribute?
When using "value" you're telling React this is a controlled component, that is, the input is set programatically.
Just remove the value field and you're good to go.
Reference
https://facebook.github.io/react/docs/forms.html
I have a text field.If the entered character limit exceeds 15 ,I have to check whether it is showing the correct error message or not.
It's unclear your question but if you need to show the right error you need something like this:
<form name="formName">
<input fr-validate type="text" name="Name" class="form- control border-radius-0" ng-maxlength="15" ng-model="FirstName" />
<p ng-show="formName.Name.$error.maxlength">Name is too long</p>
</form>
The p will be show if you exceed the length.
I have struggled for long hours on this issue.
I've tried to upload directory as below on the chrome browser.
1. click the button named with 'Browse...'.
2. select a directory named with 'a'.
3. at this point, the directory hierarchy is ignored.
the directory has a structure as below.
ex) d:/test/a/b/c/1.txt
I want to keep directory structure as 'a/b/c'.
anyone else to know the resolution?
<f:form method="post" action="uploadFiles" name="uploadFiles" enctype="multipart/form-data">
Resource Id : <input type="text" name="resourceId" placeholder="ex) test or test_op"/><br/>
<input type="file" name="files" id="files" multiple="" webkitdirectory="" jsonware="true"/>
<f:submit value="submit" />
</f:form>
Well I am struggling for the same cause. This code really makes it happen but theres a bug or something with the transfering of the files/folder, out of 25 only 20 gets send, But anyway it may help you.
http://sapphion.com/2012/06/keep-directory-structure-when-uploading/
Let me know if you come up with something,
The tutorials for xml treePanels are too simple. I don't know if what I want is even possible. What I want is to see a tree with a root folder called "contenttype" (or simply "root" is acceptable). Inside the root folder is one folder called "config" and inside of that should be any number of folders called "block" and within each block folder should be any number of "input" nodes. Below is a typical XML input that should produce the tree structure described above. Notice the tree should ignore the "form" and "title" nodes as well as the child nodes of "input".
<contenttype>
<config name="Person" version="1.0">
<form>
<title name="last-name"/>
<block name="Personal info">
<input name="last-name" type="text" required="true">
<display>Last name</display>
<xpath>contentdata/last-name</xpath>
<help>Enter the last name</help>
</input>
<input name="first-name" type="text" required="true">
<display>First name</display>
<xpath>contentdata/first-name</xpath>
<help>Enter the first name</help>
</input>
<input name="personal-history" type="textarea" required="true">
<display>Personal history</display>
<xpath>contentdata/personal-history</xpath>
<help>Enter relevant information</help>
</input>
</block>
<block name="Pictures" group="contentdata/pictures">
<input name="portrait" type="image">
<display>Portrait picture</display>
<xpath>contentdata/portrait</xpath>
<help>Should be a passport type picture</help>
</input>
</block>
</form>
</config>
</contenttype>
Furthermore, I would like the name of the block folders to be the same as the name attribute of the block nodes and the name of the input nodes in the treePanel to be the same as the name attribute of the input elements in the XML.
I tried all sorts of configurations for the TreeStore, Ajax Proxy, Xml Reader and fields. I eventually got a root folder and two folders named "undefined" but they did not appear in the preview or when I loaded the page in a browser. Also, it says records loaded but does not say how many the way other datastores do.