SOLVED Multi Page Form, Why do we think it is not working?

I am working on this multipage form for a client. I followed this example because it seemed super easy: https://mtechwizard.com/how-to-create-multi-page-form-on-wix/
Every time I put the below code into the site this line came up with an error:

$w('#formIdInput').value = session.getItem('formId');

This is invalid-$w(‘#formIdInput’).value
This is the site code:

import {session}     from 'wix-storage';
import {combineRows} from 'backend/multi-page-form';

$w.onReady(function () {

    let formId = session.getItem('formId');

    if (formId === null) 
    {
        //Generate an unique id for the multi-page form
        formId = Math.random().toString();

        //Save the form id to browser session memory
        session.setItem('formId',formId);
    }

    //Assign formId in session memory to the form on page
    $w('#formIdInput').value = session.getItem('formId');

    combineRows(formId);
});

This is no longer giving me an error

$w('#formIdInput').value = session.getItem('formId');

But it is still not working.
This is the back end code:

import wixData from 'wix-data';
export function combineRows (formId)
{
wixData.query('FormsMasterDatabase').eq('formId', formId).find().then
(
(result) => {
let rows = result.items;
let rowIds  = [];
//Collect ids of the rows that need to be removed from collection
for (let row of rows)
{
rowIds.push(row["_id"]);
}
//Go through each row, and add the row data to the first row
for (let index = rows.length - 1; index >= 1; index-- )
{
//Go through each field in each row, and add field value to the first row
for (let field in rows[index])
{
if (rows[index][field] !== null)
{
//Assign field data on each page to the same field on the first page
rows[0][field] = rows[index][field];
}
}
}
//Remove all the rows from collection
wixData.bulkRemove('FormsMasterDatabase', rowIds)
//Insert the combined row (the first row) to collection
.then
(
(removeResult) => { wixData.insert('FormsMasterDatabase', rows[0]); }
);
}
);
}

No matter if I put ‘’ or “” or Forms Master Database or Form Id nothing changes
This is the url: https://elizabethjhay.wixsite.com/mysite-9
I need help asap. I am trying to make this live as soon as I can. We have just been having a time with Wix multi forms and I want to just start fresh.

Does some know the answer?

Do you have an input field with that name?
formIdInput

Yes

Have you tried setting it to a variable? Not on an input field.
for example:

let test = session.getItem('formId');
console.log(test);

Where exactly is the error indicated?

This is what is happening in video form

I have tried this

Let me know if you can help.

@ AV promotional , I know how I would write this. But can you rewrite the example to match what I have because I may be inserting it wrong. I appreciate it in advance.

Any ideas from anyone?

Well that is sort of ironic, WordPress website being used for Wix Tutorial :wink:

Anyways, what exactly is the error that you are getting now as you originally were saying that the line here - $w(‘#formIdInput’).value = session.getItem(‘formId’); - was not working and now it is working.

Now you are saying it is not working, however is there an actual part of it that is not working or is it not working from the beginning of the form?

Also, I notice that you have the dataset set up as custom use, did form submission not work for you and what custom use settings have you got as that could be causing an issue if one of those four choices is setup incorrectly.

As for the #formIdInput user input element, what type of user element have you got it set as? If you have it set as a number, then this is WRONG.

In the example it shows as a number so I can guess that must people would set it up as number, however as you are using Math.random() in the code and this will generate a random figure between 0 and 1, you will get a number as shown in the example for step 1 that contains a 0.something.

If you have the #formIdInput setup as number here it will always be invalid as it won’t work with the decimal point in the number.

To workaround this, you need to put the #formIdInput user element as Text and NOT number.

The field in the dataset itself can still be number, however the user input must be of type Text.

Finally, looking at that tutorial, did you try as it states toward the end of step 4.
Now test your pages. Fill out those inputs. Hit next buttons. Check out your collection afterward. And check out mine.

Does it or did it work at that point? Or did you not test it then and simply carried on with the rest of the tutorial?

If you had tested it then you would have probably got this error and it could have been dealt with there and then and not until you had made it all up completely.

Anyways, without going through the tutorial ourselves and checking it on a test site ourselves etc, we can only guess at what the issue might be here and the user input type on that hidden user input is what is drawing my attention.

There was a pre-existing multistage example from Wix.
https://www.wix.com/corvid/example/multistage-form

Also, just be aware that you can do all of this in Wix Forms now as well.
https://support.wix.com/en/article/adding-and-setting-up-a-multi-step-form

Yes the Wix Forms option is for people who want a quick and easy solution and don’t want to go down the code route and make their own user input form etc, so you won’t get the free reign that you do if you do it all yourself.

@givemeawhisky This is the error I am getting. All the submissions go through it is just that they don’t combine with the form id, despite being the same.


It is set as text input. I would not set it as a number. If you reference the the video up thread it shows my set up.

I know Wix has all of this, I have been with Wix for a long time. I was part of the beta testers for Wix Code, but it is limited for my client for two reasons:

  • Multiforms only allow 3 steps.

  • We need more than five forms
    To upgrade them would be cost prohibitive because they are a non-profit.

Thanks for your help.

@elizabethjhay

Okay, completely understand the last part as I do non-profit organisations as well and you don’t want any extra cost etc.

I will try the example myself later and see what happens when I make it up myself using the same names etc as yours, if I get the same error then I can have a fiddle and see exactly why.

However, as AV has already said, that would normally only appear if the id name is wrong and I am sure that you have checked and rechecked it again and again!

it isn’t something stupid here and just an extra space at the end after the t, plus I would simply try just changing the input name for something else and seeing if another name for it works.

Thanks for letting me know and I will come back asap with this.

@givemeawhisky This is great! I so appreciate you checking. I have checked that field like crazy. The example says put it in the SITE code. Which is what I did. When I put it in the individual PAGE codes it doesn’t show that error, but it does not fix the issue. The combine still doesn’t happen.

@givemeawhisky Let me know if you got something to work.

@elizabethjhay Again, I suggest you check to see if this is really the exact name of the input field, maybe you haven’t followed upper and lower case letters?

@av-promotional I have. I have literally copied pasted the field name from the code, checked for extra spacing, and If you look at the video above it shows you my properties for each page. Like I also said up thread, this example asks to put this in the SITE code. When I look for my options on the SITE code I can insert header 1 and footer 1. When I attempted to toggle on all pages it did not connect to the item. When I put it in the PAGE code of each page, the error goes away, but nothing combines. When I adjust it in any way the submission fails to go in and I get a failed to validate. If there is another way to combine the record, outside of what has been suggested, please let me know.

Thank you

Okay, so I have tried the example from the tutorial itself first just to test it as it is stated and the issue is that on the site tab only, the formIdInput is not being recognised, exactly as you have had on yours.

I thought that it might have just been a simple fix of not copy and paste the element from another page and just create the element on the page itself. However, that still did not get it to be recognised by the site tab.

If you deleted the name and simply recalled it something else then it would still not work and the same with having the elements name come up automatically when you begin typing in the elements name, with it only showing footer!

This is most likely a bug within Wix and the site tab as if you move it all to the page tab, it will work perfectly and run as it should when you test the code first of and it creates the two rows for the name, email and form id submissions

You won’t have the third line created for the form id on the thank you page as there is nothing on that last page to submit that value into the dataset.

So, after adding the backend jsw file and testing it again it all works as it should and put it all into the one dataset row.


It means that you will have to copy the code onto each page that you use for the form, however at least you know it is working for you now.

You can test it here and it all runs and combines the values into one row in dataset.
https://givemeawhisky.wixsite.com/multipage