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

I did that individual PAGE code a while back and it is still came in as two lines. Could you copy and paste your PAGE Code for me?

@elizabethjhay

Remember that this is needed on all of the forms pages as it does not want to work with that one id on the site tab.

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);
});

It was the two lines when I tested it midway before adding the backend file to condense the lines together.

It is only one line after you have added the backed jsw file which your code imports through the import {combineRows} from ‘backend/multi-page-form’;

Yes, I have done this before. I have put the code on each PAGE. At this point if I do that it has no errors, but it gives me a validation error on the first page and nothing goes through.

If I was you I would just try it your editor with just disconnect all your user inputs and take them off required if needed and then just try reconnecting each field one at a time and see if it works with each field.

If it works with that one extra field added, then reconnect the next field and try that and so on and so on until you get the whole user inputs working on your form.

If you are testing it on your fully made up form, then you need to make sure that you are filling in all of your user input elements before moving on.

Or at the very least take off the required option in the user inputs settings.

I will see what happens. Thank you!

If I try it on the name now and leave it blank you will get the console error message of ‘save operation failed: DatasetError: Some of the elements validation failed’, along with the user input going to the error mode and showing the red frame.

If you don’t want that then take off required setting on all the user inputs that you don’t want to be filling in to test it on.

Ok. I will try that

@givemeawhisky Bad news. It is still not combining. I have it on all pages and no required fields I have a question: Do I need to use the collection ID or the collection name in the jsw? I am using the collection ID because that is logical to me, but just let me know.

Okay that is weird as it is working for me in preview and on the live site when I tested it.

I just simply called all my test page setup exactly the same as the tutorial used originally.

So in the backend file you would be using the name of the dataset as stated in the code.

wixData.query("Contact").eq("formId", formId).find().then

I will have another look at it tomorrow and see if I write the code differently or try changing the number so that it is just a random whole number and not just the math random between 0 and 1 so you don’t have the decimal point in it.

The first thing to point out with that external tutorial is the spelling mistake in the backend jsw file name itself, especially if you are just copying and pasting everything.

Okay it is all working now and you can view and test it here.
https://givemeawhisky.wixsite.com/testing

I saw this error. I did not copy and paste for that reason.

I changed everything to contact match the example and still nothing. I am not sure if the additional code on the pages is the problem

For Example,
This is the code on my first page:

//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session}     from 'wix-storage';
//-------------Form Id Code-------------//
$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');

});

//-------------Drop Down Code-------------//

export function next_click(event) {
		if ($w('#conDropdown').value === 'Membership Application') {
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/member-applications-business")
			} else if ($w('#conDropdown').value === 'Flower Basket Plaques') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/flower-basket-plaques")
			} else if ($w('#conDropdown').value === 'Mailing a Payment') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/payment-by-mail")
			} else if ($w('#conDropdown').value === 'Membership Deal') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/membership-deals")
			} else if ($w('#conDropdown').value === 'Sleepy Hollow Street Fair') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application")
			} else if ($w('#conDropdown').value === 'Tarrytown Street Fair') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application")
		
		}
	}

I also tried this code on the first page

//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session}     from 'wix-storage';
import {combineRows} from 'backend/multi-page-form';
//-------------Form Id Code-------------//
$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);
});

//-------------Drop Down Code-------------//

export function next_click(event) {
		if ($w('#conDropdown').value === 'Membership Application') {
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/member-applications-business")
			} else if ($w('#conDropdown').value === 'Flower Basket Plaques') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/flower-basket-plaques")
			} else if ($w('#conDropdown').value === 'Mailing a Payment') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/payment-by-mail")
			} else if ($w('#conDropdown').value === 'Membership Deal') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/membership-deals")
			} else if ($w('#conDropdown').value === 'Sleepy Hollow Street Fair') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application")
			} else if ($w('#conDropdown').value === 'Tarrytown Street Fair') { 
			$w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application")
		
		}
	}

The other part of the form that has more code is Flower baskets.

//-------------Imports-------------//
import {session}     from 'wix-storage';
import {combineRows} from 'backend/multi-page-form';
//-------------Drop Down Code-------------//
$w.onReady(function () {
	$w('#plaque1').disable();
	$w('#plaque2').disable();
	$w('#plaque3').disable();
    });
export function levels_change(event) {      
		if ($w('#levels').value === 'Lilly') {            
			$w('#plaque1').placeholder = 'Plaque Message';            
			$w('#plaque1').enable();
			$w('#plaque2').disable();
			$w('#plaque3').disable();     
		} else if ($w('#levels').value === 'Orchid') {            
			$w('#plaque1').placeholder = 'Plaque Message';
			$w('#plaque2').placeholder = 'Plaque Message';            
			$w('#plaque1').enable();
			$w('#plaque2').enable();
			$w('#plaque3').disable(); 
			} else if ($w('#levels').value === 'Garden') {            
			$w('#plaque1').placeholder = 'Plaque Message';
			$w('#plaque2').placeholder = 'Plaque Message';
			$w('#plaque3').placeholder = 'Plaque Message';                    
			$w('#plaque1').enable();
			$w('#plaque2').enable();
			$w('#plaque3').enable();       
				} else if  ($w("#levels").value === 'Select') {
			$w('#plaque1').disable();
			$w('#plaque2').disable();
			$w('#plaque3').disable();
			$w("#plaque1").value = null;
			$w("#plaque2").value= null;
			$w("#plaque3").value = null;       }    
	}

//-------------Form Id Code-------------//

$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);
});

Otherwise, the other pages have this:

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

//-------------Form Id Code-------------//

$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);
});

The main issue was the bug with the site tab code always showing that error for the formIdInput regardless of if you kept it the same, renamed it etc, etc,

However, with the error the code itself will still run and do the job, although the issue then was that the tutorial worked fine in the preview mode and combined everything to one row, yet not working in the live published site when I went back to check it today again.

I had a little play around with the code already used for this from the tutorial and it was not worth the hassle in the end of changing it all to suit.

I did play around with the having two numbers useable, one from the page code itself and the one from the site code, however that would be pointless when you are only needing the one number here to use with the form,

Therefore, I moved the number for the formId to the page code tab and changed it a whole random value without the decimal point after the 0 for which the math random was originally giving you with a return value of something between 0 and 1.

The second issue is that as you are connecting the form to the dataset on each page, that is making it take it as a new form submission each time and hence why you get the seperate rows of user data.

So, to get around this and the need for the backend jsw for combining all the rows again, you can simply just take off the dataset connections on the pages and do it all through the use of Wix Storage and Wix Dataset in your code.

On the pages the user inputs for the name and email for the user to fill in are set to required and set with a onKeypress event.

Whilst the buttons on the name and email pages are disabled on load and only enabled when the user starts typing in the user input itself.

On the thank you page the button is enabled on load and is set up in your code to be direct the user to another page after saving the user inputs into the dataset in the one row only.

The only time a dataset is used on the page is on the thank you page with it being used for the save function in the code.

No elements or buttons are connected to a dataset on any of the pages themselves it is all done through the use of code.

Name Page (1st page)

import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady( function() {
function randomNumber (len) {
var x;
 var n = '';
    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }
    return n;
}
$w('#formId').value = randomNumber(10);
});

export function name_keyPress(event) {
$w("#button1").enable()
}

export function button1_click(event) {
session.setItem("formId", $w('#formId').value);
session.setItem("name", $w('#name').value);
wixLocation.to("/email");
}

Email Page (2nd Page)

import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady( function() {
$w('#formId').value = session.getItem("formId");
});

export function email_keyPress(event) {
$w("#button1").enable()
}

export function button1_click(event) {
session.setItem("formId", $w('#formId').value);
session.setItem("email", $w('#email').value);
wixLocation.to("/thank-you");
}

Thank you Page (3rd Page)

import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
$w('#formId').value = session.getItem("formId");
$w('#name').value = session.getItem("name");
$w('#email').value = session.getItem("email");
});

export function button1_click(event) {
  $w("#dataset1").setFieldValues( {
      "formId": $w('#formId').value,
      "name": $w('#name').value,
      "email":$w('#email').value
} );
$w("#dataset1").save();
wixLocation.to("/name");
}

As you have more user input elements on your pages than just the one, you will have to add them all into your code on each page to suit your own website. However, at least you know that this way should work for you.

Now I am off for a few wee drams of a very nice whisky :tumbler_glass::tumbler_glass::tumbler_glass::wink: