Simple Question: 3 forms 1 row of data in collection

Discussion Ask a question
, ,
1

I have 3 forms on three different pages. The objective to connect all form inputs to a single collection without additional rows being generated.

Maybe i could add all forms to a single page, which would create a monster page to load apart from anything else so, is there a way to let insert from subsequent forms / uploads into a current row after the first form as been submitted thus creating only one row entry and force the new submissions into the empty fields?

I would prefer to add some code than redesign my site
Thanks
Adam

2

Yes. It is doable. But I think your idea to merge them all into 1 page is better solution (You can make each of 2 steps collapsed and expand them when the user clicks Next.

3

ok thanks. so how would i go about the first option if its doable please?

4

sorry the second option i.e. to force data into empty cells in the same row

5

For example there are two benefits. First i could use a field submission from form 1 in form 2 which will improve the experience for user and second i would rather learn how to improve the site now than take the easy option first. If i add all fields to the same page i would not be able to do this.

And i don’t mind doing part of the easy option of collapse / expand - that would look nicer anyway
Thanks

6

You have 2 options:

  1. To store the data from form1 and form2 in the browser cache, and then submit of all it at once with form 3.

  2. To submit each step to the database and to update the existing record
    What would you like to do?

7

ok this is sounding good.

option 1 sounds like adding all forms to the page?

option 2 sounds interesting but i’d like to know how the update existing record would be performed ? would each submit actually update the record (row) so first form i.e. text = submit -second form, upload image =submit so that now all submissions were on the same row?

If i use a button to submit the first form, do i need to code the submit / update for the second and third form to the same collection?

8

Regarding option 1, No. You won’t have the GUI elements of all the forms in 1 page.
You will store the data from form1 as a string:
“{“firstName”: “John”, “lastName”: “Doe”, “email”:“email@email”}” to the browser cache and update it later.

9

@jonatandor35 Thanks ok, this could really work, so say my next form item is an image, i would do the same for this?

I guess the form on the very last page would then require all the cached data to be uploaded as a single row

also with this method could there be any incompatibility with browsers or restrictions in another way?

and option 2 please

10

@adcatch02

  1. it can work for an image as well (you store the image url source).

  2. You’ll need to get the string from the storage, parse it and update it (no need present it to the user, of course).

  3. It might be a problem if the user set the browser to disable caching (but then it’ll be a problem with many other sites well).

11

Re option 2:
On form1, you submit the form with an identifying value (it can be user id, if every user allow to submit only one form; it can be any other identifier)
On form 2, you run a query based on the identifier and retrieve the record,
Then you add the the data to the Data Item and use update() to submit the update:
https://www.wix.com/corvid/reference/wix-data.html#update

12

@J.D the really frustrating thing is all i’m really trying to do is get an image that is submitted on a different page into the same row as the form that was previously submitted. I didn’t think it would be so hard. I thought that perhaps a referenced field would be the solution to this, as it would import into the connected collection without creating a new row :slight_smile:

13

If there was just a simple solution after insert to the collection like update, refresh, save or insert specifically into a current row that would be amazing

14

This is the code that’s getting the image in the collection, which has the adverse effect of creating a new row and preventing other elements from being read because the cells that were populated by previous forms are present but empty on the row that contains the uploaded image

The key bits of this code are Let to insert which is the form field in the collection and wixData insert which is the collection name. Code wise this works

export function button19_click(event) {
if ($w(“#uploadButton4”).value.length > 0) {
$w(“#text78”).text = Uploading ${$w("#uploadButton4").value[0].name};
$w(‘#image44’).show();
$w(“#uploadButton4”).startUpload()
.then( (uploadedFile) => {
let toInsert =
{“membercandletributetextdata”:
uploadedFile.url };
$w(“#text78”).text = “Upload successful”;
$w(‘#text78’).collapse();
$w(‘#button17’).collapse();
$w(‘#image44’).hide();
$w(‘#button17’).expand();
$w(‘#text79’).show();
$w(‘#text79’).expand();
$w(“#uploadButton4”).disable();
$w(‘#button21’).show();
$w(“#image43”).src = uploadedFile.url;

wixData.insert(“MemberCandleTributeTextData”, toInsert)
.then( (results) => {
let item = results; //see item below
} )
. catch ( (err) => {
let errorMsg = err;
} );

  }) 
  . **catch** ( (uploadError) => { 
    $w("#text78").text = "File upload error"; 
    console.log(`Error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  });

}
else {
$w(“#text78”).text = “Please choose a file to upload.”;
}

15

@Adam

The most simple solution for you is to create a slideshow on your page.

Let the slide show have 3 slides.

Please one of your forms on each slide.

You can then run all your above code on the one page which will insert all the user data including the image into the same row on the collection.

16

@mikemoynihan99 or collapsing & expanding boxes on a single page (which is more flexible than a slideshow).
But Adam didn’t want to load everything at once (and slideshows, as you know, load with the page). So he will have to write code to retrieve and update the data on each page.

(But I agree with your recommendation: it’s better UX to load everything at once).

17

well guys thanks for your help i have reverted to the original all on one page flow. If you have the time though i would love to know the code process for the latter option, as i’m sure it will help others in the future and possibly me
thanks

18

https://www.wix.com/corvid/example/multistage-form

19

Again thanks but i think i’m going mental. Have just changed design and thought i’d perform a quick test.

export function button22_click(event) {
$w(‘#columnStrip8’).expand;
$w(‘#columnStrip12’).collapse;

ColumnStrip12 is collapsed in properties
button 22 is correct in properties and assigned onClick event

absolutely nothing. Is it me?

20

Ok guys, so i’ve created a one page form. Its quite large and works well but i can see an issue with the hard wired image upload loading first. I have previously also used a connect to data button to submit the rest of the form and this works ok.

So, is it possible to hard wire code to save the entire dataset as one? I can post my code but there is quite a lot of it.

This is new territory again for me
Thanks
Adam