I am a learner of ReactJs. I have a fully functional form in ReactJS made with hooks. I've some fields and I just want to display my form submitted data to a DOM when handleSubmit is clicked.
I want the user to add any number of forms as it works and display all of those submitted data below.
Here is codesandbox code. Click Here
Thank you.
In your code you've attempted to use the array as an object, you should first indicate the array index, in your case it is 0 and that will give you access to the array first element which is your object and now you could get the values from it
let val = [...fields]
// when you want access the data
val[0].name
This is the bug in your code if I've got you correctly
Related
I'm trying to preselect rows in my table but the table won't refresh unless there are changes to the actual data itself. Is there a method to reinit the table that doesn't involve changing the data?
It's also completely possible that my method for approaching this requirement is wrong and there may be a better way? I've created an example sandbox here:
https://codesandbox.io/s/mock-preselected-rows-data-t36nl?file=/src/App.js
In this you can see I have a mock response from my server for determining what rows should be selected. I'm then grabbing the data to compare to see if any of the items from the mock response exist in the data and if so push them to a new obj which is then fed into the intialState for selectedRowIds
Any guidance appreciated.
Seems your work is all working. The short answer to your question.
As long as you want the user see something, in a React way, it needs to be contained in a state, or state derivative. In your case, it's a cell data wrapped in row and in a table.
So you can't avoid selecting it without touching the data. Unless you don't want user see the change.
Although the checkbox doesn't seem to be part of the original data stream, when you develop on it, you have to make it part of the data. To be honest, it's easy you make it part of the data, because by the time you want to refresh the table, ex. selecting or de-selecting, or deleting a row, you want everything refreshed. Unfortunately it's very difficult to do local refresh with a table in React. It's possible, but very difficult, because most of the design is based on either prop or context.
You can also refactor your handleSelectedRows function.
// Find row ids and compare them with our 'preSelectedTheseItems' array.
const handleSelectedRows = () => {
const preIds = preSelectTheseItems.map(item => item.collectibleId)
return data?.filter((collectibleRow, index) => preIds.includes(collectibleRow.collectibleId));
};
Example : codesandbox
Excuse me if this a silly question,but I have tried so much. I have a two form fields which duplicate with add button. So here I am trying to access the input from value formfield using ngmodel. But when I duplicate the set of formfield using add button. The input which I entered in the value form field repeats when I click the add button. This happens when I am using ngmodel to get value. Is there any other way to solve this? Comment down if u have any doubts regarding the question
My sample code: https://codesandbox.io/s/formarraydynamic-forked-t7y9u?file=/src/app/app.component.ts
To get the value from Form and show it in UI. You can create a getter property in component which will return the value from that particular field like this.
get values() {
return this.myForm.value.map(x => x.value);
};
Add then bind this variable into your UI like this.
<p>result:{{values}}</p>
As your form is an formArray you will get your result in an array type.
I have a challenge and I need help.
I am trying to integrate a payment system and I got some stuck, I have something like this:
options: PaystackOptions= {
amount: 5000,
email: 'user#email.com',
ref: `'some code that generate random stuff'`
Some methods other.
Now when I use hard coded values it works fine but doesn't work when I attempts to assign values from my form. My question is how do I assign values from my reactive form to the above for it to work. When I console log the form values , there are values.
I try assigning values like this in my onSubmit method where the Payments is still initiated that is I have one button where I called the onSubmit method and Initiated the Payment.
this.options.amount = this.donateForm.value['amount'];
this.options.email = this.donateForm.value['email'];
When I console log this.options.amount , the value is there but somehow doesn't get passed to options when I assign it, I know this is not a better explanation for my problem but any help would be appreciated.
Assuming your requirement, see if the following help to fix your issue
https://stackblitz.com/edit/angular-ivy-sdkh8q
hello I have a small project I'm working on.
the project is calling an API with ajax and getting info about currencies, one of the things I'm stuck on is that I have to write them in cards that include a checkbox that has to stay activated after I refresh the page.
any suggestions?.. please I'm desperate
When you make your call on your API just set the checked value on the correct checkbox, please have in mind that setting checked=false will still give you a checked checkbox.
<input type="checkbox" checked>
One way to preserve information against a page refresh is to use localStorage.
LocalStorage allows you to store key:value variable pairs in the local browser. You can view the localStorage values for any given website in DevTools F12, on the Application tab. The variables are stored by website, and remain as they are until (a) they are deleted, or (b) browser cache is cleared. (For more info on when localStorage is cleared, see this answer).
LocalStorage is dead-simple to use:
let myPet = 'Cat';
localStorage.setItem('animal', myPet);
And to read it:
let myPet = localStorage.getItem('animal');
What you might want to do in your project, perhaps on a timer - or after the ajax call - is loop through your fields and create an object with all the fieldnames/values. Then use JSON.stringify to turn the object into text that you can store in a localStorage variable.
Note that you will need to write something that on page load ( $(document).ready() ) will see if the fields are empty and if there is a RECENT localStorage variable (so, you might want to create second localStorage variable (you can have MANY) that has the last-updated datetime) then you read the JSON string into a javascript object and populate your field values.
I would recommend using a dictionary, putting something unique like an ID of those currencies that are checked at that time.
If the new answer you get has the same currencies as before plus more, you can use that dictionary in memory to check those items again. If you don't get the previous response, you can just add those new items to avoid unchecking the checked currencies.
Exmaple:
var dictionary = {};
// here you should do a forEach in currently checked currencies
...
dictionary[id] = value; // (true, because it is the value of checked)
Hope it helps you.
This question already has answers here:
How do you convert a jQuery object into a string?
(12 answers)
Closed 6 years ago.
I have a web form #form1 and many elements are dynamically created, therefor I can't just use searialize. I want to store the form input in localstorage so that when the user submits the form, they can hit the back button, and I can recreate the form 100% where they left off.
This is an internal company tool, nothing super secure required for a public facing site. I want to store the HTML contents from the form including the form itself, that way all dynamic content can be restored.
I've tried $('#form1')[0].outerHTML $('#form1').content() and many other options in jQuery, but that doesn't give me any filled form values.
I basically want the evaluated HTML of the form id form1 100% complete, including all filled out data to be stored in a variable in JS.
This is not a duplicate because no other question I've seen anywhere relates to getting a complete HTML element, and all form values stored to a single string for easy restoration later. This is NOT serialization.
Try getting the information from the input fields with .val() and store it in arrays for AJAX querys or another process operations:
JS example:
var key = [];
var value = [];
$("input").filter('.form1').each(function(){
key.push($(this).attr('id'););
value.push($(this).val());
});
You can also store the information in one array and split the key and the value like CVS with a semicolon.
Try this:
$('<div>').append($('#formId').clone()).html();
I found it here.
Example.