I have been trying to create and submit a basic React Native form without any library. Currently, for testing purposes, I have included only 3 TextInput(s) only.
As soon as the form is submitted only the values of the last TextInput, password here, is shown updated in the state object (in the console). The first two TextInput fields values remain empty as the initial state.
I tried lots of patterns to pass the data from the input fields using the method onChangeText(), but nothing seems to work for me. No matter how many input fields, only the last input field's state is available in the console. Not sure where things are going wrong. Here is the snack expo link to reciprocate the issue:
https://snack.expo.io/0DP-pi6bn
This might be a silly issue that I am unable to figure out, but any help to resolve the same, will be highly appreciated.
Thanks
Related
I have been coding for 4 months, this is my first post and my first time using SandBox, feel free to roast me...
I am trying to make a complicated multistep, dynamic form where users can input information about cars. I am trying to use the React hook useContext because I figured it was the best way to pass around the data. I am also trying to make part of the form dynamic using Formik FieldArray, where a user could input multiple past owners of the car.
This is where I am stuck. Specifically on the "Previous Owner" section when trying to use FieldArray. The data gets set with useContext, but it freaks out when trying to add more than one previous owner. I think it's because it's not identifying each previous owner as an additional object. The TextField also loses focus after each character input.
I created a SandBox in order to see it visually plus the code. I also added the JSON values as it kinda helped me see whats going on.
Sandbox Link
Any help would be greatly appreciated! Thank you very much for your time and help!
Using Wizard form ant trying to understand how to get current input field value in the {activePage}. Can reach input value in Wizard.js but stuck on Index.js Someone know where I am missing the point?
You will have to pull your <Form> component out to as high as you need the values. They are only available inside <Form>.
It's not strictly recommended, but you could also do something like the Redux Example that updates a Redux store with the current form values.
I have an input field with id Email and im getting the value of this field to update my object. However when i try to edit it again without a refresh and try to send it via Ajax, email field becomes empty. I get this field by using $("#Email").val() and I tried using .attr("value") as well however this gets the old value of the field not the new value.
My problem is similar to this "jQuery showing empty string on input text?" however, I can't use the solution there as I have to use the input box multiple times after updating.
However when i try to edit it again without a refresh and try to send it via Ajax, email field becomes empty.
Are you sure the page is not refreshing? The field can only become empty from either a refresh, or actual JavaScript code you have written/included that is causing the problem.
$("#Email").val() will read the value and will not blank it out.
.attr("value") will read what the value was when the page loaded, but not accounting for changes made by the user.
My problem is similar to this "jQuery showing empty string on input text?" however, I can't use the solution there as I have to use the input box multiple times after updating.
Do you understand the reason for that solution? The problem there was that the value was captured to a variable Name too early. The solution was to move the call to val() to later. (after blur took effect, not before)
I hope these are helpful, but there's really not much more I could tell you without seeing your code.
I expect this question to be closed due to lack of details. When you post the new question, please try to fix one problem at a time (either "becomes empty", or "gets old value") and post enough details for a solution. (i.e. an SSCCE)
I'm building a Safari extension that will auto complete a bunch of fields found on an online form.
That online form is using angularJS to tie in the value in the fields with the value in a model. I don't know much about angularJS, but I could deduce that from the ng-model=user.firstname.value etc. directives found in the input tags.
My Safari extension will get the first name input field, and set firstNameField.val("A first name") in order to add a value in that field.
However, this doesn't seem to update the angularJS model, since if I am to exit that field manually, it'll color itself red, saying there is no data, even though there clearly is some text.
From my extension, I don't seem to be able to access the angular object unfortunately, so I cannot call the methods that I read need to be called (angular.$apply).
Seems like what I am trying to do is doable, since the LastPass extension correctly adds values to the input fields and causes the model to be correctly updated – the fields don't color themselves red.
I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.