Thank you so so much for all your help. I can see you did a lot of work! I will try this. I was actually trying to implement the insert function last night in a test using data and storage. I will let you know how it goes.
You could keep this all to the one page and simply put each of the forms pages into a slide in a slideshow and instead of moving the user to the next page, simply setup your code to change to the next slide.
That way you can keep the form and all the code for it all on the same page and not have to direct the user away from your current page and back again for example.
Slideshow API.
https://www.wix.com/corvid/reference/$w.Slideshow.html
Hi,
I used the same code posted above to create the multi-page form ( https://mtechwizard.com/how-to-create-multi-page-form-on-wix/ ). It works in the preview version but it doesn’t work in the live version. The rows with the same formid are shown in the live table but they are not combined.
I tested the wix multiform option but it has limited number of fields so I am trying to fix this instead.
Any idea why the preview is working and the live is not?
Thanks
Read the post, it will explain why.
@givemeawhisky tanks sorry!
I tried the code above and adapted it to my case with multiple inputs on each page (2 pages of inputs + 1 thank you page). I get the following error:
“Dataset Error: There is no current item”
and it points to the line with the setFieldValues() function.
I tried to change the code and follow the sample here:
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#setFieldValues
But I still get the same error, how can I solve this?
SOLUTION:
Based on my site: elizabethjhay.wixsite.com/mysite-9
Do not connect anything to a database.
Page 1:
//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session} from 'wix-storage';
import wixCrm from 'wix-crm';
//-------------Form ID------------//
$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('#formIdInput').value = randomNumber(10);
});
//-------------Form Submission-------------//
export function next_click(event) {
session.setItem("field 1", $w('#input1').value);
session.setItem("field 2", $w('#input2').value);
session.setItem("field 3", $w('#input3').value);
session.setItem("field 4", $w('#input4').value);
session.setItem("field 5", $w('#input5').value);
session.setItem("field 6", $w('#input6').value);
session.setItem("field 7", $w('#input7').value);
session.setItem("field 8", $w('#input8').value);
}
Options for page one:
- Have a status field
- Navigate to other forms
- Create a contact
//-------------Status------------//
$w.onReady( function() {$w('#status').value = "PENDING";});
//-------------Dropdown Code-------------//if ($w('#conDropdown').value === 'Membership Application') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/member-applications-business") } elseif ($w('#conDropdown').value === 'Flower Basket Plaques') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/flower-basket-plaques") } elseif ($w('#conDropdown').value === 'Mailing a Payment') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/payment-by-mail") } elseif ($w('#conDropdown').value === 'Membership Deal') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/membership-deals") } elseif ($w('#conDropdown').value === 'Sleepy Hollow Street Fair') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application") } elseif ($w('#conDropdown').value === 'Tarrytown Street Fair') { $w('#next').link = wixLocation.to("https://elizabethjhay.wixsite.com/mysite-9/streetfair-application") }
//-------------Create Contact-----------//
$w.onReady(function () { $w("#next").onClick( () => { wixCrm.createContact( {
"firstName": $w("#firstName").value,
"lastName": $w("#lastName").value,
"emails": [$w("#email").value],
"phones": [$w("#phone").value]
} ); });});
Page 2:
//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session} from 'wix-storage';
//-------------Submission Code-------------//
export function next_click(event) {
session.setItem("businessAddress", $w('#businessAddressInput').value);
session.setItem("billingAddress", $w('#billingAddressInput').value);
session.setItem("website", $w('#url').value);
session.setItem("reasonForJoining", $w('#reason').value);
let toInsert = {
session.setItem("field 1", $w('#input1').value);
session.setItem("field 2", $w('#input2').value);
session.setItem("field 3", $w('#input3').value);
session.setItem("field 4", $w('#input4').value);
session.setItem("field 5", $w('#input5').value);
session.setItem("field 6", $w('#input6').value);
session.setItem("field 7", $w('#input7').value);
session.setItem("field 8", $w('#input8').value);
"New Field 1 Page 2": $w('#NewField1Page 2').value,
"New Field 2 Page 2": $w('#NewField2Page 2').value,
"New Field 3 Page 2": $w('#NewField3Page 2').value,
"New Field 4 Page 2": $w('#NewField4Page 2').value
};
wixData.insert(YourDatabase", toInsert)
.then( (results) => {
let item = results;
} )
.catch( (err) => {
let errorMsg = err;
} );
wixLocation.to("/pagename");
}
Options for Page 2:
- Insert specific fields into a 2nd database
let toInsert2 = {
session.setItem("field 1", $w('#input1').value);
session.setItem("field 3", $w('#input3').value);
session.setItem("field 4", $w('#input4').value);
session.setItem("field 5", $w('#input5').value);
session.setItem("field 7", $w('#input7').value);
session.setItem("field 8", $w('#input8').value);
"New Field 1 Page 2": $w('#NewField1Page 2').value,
"New Field 2 Page 2": $w('#NewField2Page 2').value,
"New Field 4 Page 2": $w('#NewField4Page 2').value
};
wixData.insert("YourDatabase2", toInsert2)
.then( (results) => {
let item = results;
} )
.catch( (err) => {
let errorMsg = err;
} );
wixLocation.to("/thankyoupage");
}
Note that with your page 1 code, if that is all on the one page then you will only need the one onReady page function and not the three that you have got through all of that code.
@givemeawhisky great! Thank you for your help! I will review the code based on your comments and let you know if it works.
@givemeawhisky The only reason I have three is because when I tried to combine them I kept getting errors for the create contact and adding the status value. Separating them made it work great. Those add ons are specific to my site
@elizabethjhay hi all thanks for your help! I used the code that @elizabethjhay posted but I had to slightly modify the last page because I was getting a “Parsing Error: Unexpected Token”.
See code below.
page 1
//-------------PAGE 1-------------//
//-------------Imports-------------//
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
//-------------Form ID------------//
$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('#formIdInput').value = randomNumber(10);
});
//-------------Button Activation-------------//
export function input1_keyPress(event) {
$w("#button1").enable()
}
//-------------Form Submission-------------//
export function button1_click(event) {
session.setItem("formId", $w('#formIdInput').value);
session.setItem("key1", $w('#input1').value);
session.setItem("key2", $w('#input2').value);
session.setItem("key3", $w('#input3').value);
session.setItem("key4", $w('#input4').value);
session.setItem("key5", $w('#input5').value);
session.setItem("key6", $w('#input6').value);
session.setItem("key7", $w('#input7').value);
session.setItem("key8", $w('#input8').value);
session.setItem("key9", $w('#input9').value);
wixLocation.to("/page2");
}
page 2
//-------------PAGE 2-------------//
//-------------Imports-------------//
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
//-------------Button Activation-------------//
export function input10_keyPress(event) {
$w("#button1").enable()
}
//-------------Submission Code-------------//
export function button1_click(event) {
session.setItem("key10", $w('#input10').value);
session.setItem("key11", $w('#input11').value);
session.setItem("key12", $w('#input12').value);
session.setItem("key13", $w('#input13').value);
session.setItem("key14", $w('#input14').value);
session.setItem("key15", $w('#input15').value);
session.setItem("key16", $w('#input16').value);
wixLocation.to("/page3");
}
page 3
//-------------PAGE 3-------------//
//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {session} from 'wix-storage';
//-------------Submission Code-------------//
export function button1_click(event) {
let toInsert = {
"formId": session.getItem("formId"),
"key1": session.getItem("key1"),
"key2": session.getItem("key2"),
"key3": session.getItem("key3"),
"key4": session.getItem("key4"),
"key5": session.getItem("key5"),
"key6": session.getItem("key6"),
"key7": session.getItem("key7"),
"key8": session.getItem("key8"),
"key9": session.getItem("key9"),
"key10": session.getItem("key10"),
"key11": session.getItem("key11"),
"key12": session.getItem("key12"),
"key13": session.getItem("key13"),
"key14": session.getItem("key14"),
"key15": session.getItem("key15"),
"key16": session.getItem("key16"),
};
wixData.insert("mydataset", toInsert)
.then( (results) => {
let item = results;
} )
.catch( (err) => {
let errorMsg = err;
} );
wixLocation.to("/page3");
}
Hi, I have the same setup as elizabethjhay and was having the same problem until I realized that my formId input field was set to be a required field, changing the formId input field to be a non-required field fixed my issue with the rows not combining. I’ve ran into another issue though… When the “multi-page-form.jsw” code combines the two rows together, it pushes the member ID (row ID) from the first entry into the second entry when combining the rows and uses that first row ID as the primary row ID. I would like to use the second entry’s row ID as the primary row ID. Is there a way to do this?
The reason I need to do this is because my form creates a “dynamic profile page” upon submission of the multi-page form and on the “Thank You” page of the form I have a “View Profile” button which is supposed to take the user to their profile page. The problem comes in when the user clicks the “View Profile” button because the dynamic profile page is setup to use the “Member ID/row ID” as part of the URL for the page. When the user clicks on the “View Profile” button, it reads the row ID from the second submission of the multi-page form instead of the first row ID from the first submission of the multi-page form, which, while at the same time the user is clicking the “View Profile” button, the “multi-page-form.jsw” backend code is combining the two row entries and discarding the second “member ID/row ID” and replacing it with the first row ID, which is causing a “404 page can’t be displayed” error to the user after the form submission.
I hope it all makes sense, any help would be highly appreciated, thanks.