How to save inputs from different pages onto the same row of a database?

johnny6packman · October 3, 2022, 2:59pm

Hi All,
I have been looking for this answer for a few days and cannot get a clear answer. It seems to be a recurrent question from lots of users.
I am trying to create the profile for my users and I need to collect their inputs from 2 pages into 1 row of my database. Please see below:

BackEnd Code:

import wixData from ‘wix-data’ ;
let options = {
“suppressAuth” : true ,
“suppressHooks” : true
};
export function dataSubmission ( payload ){
return wixData . insert ( ‘Members’ , payload , options );
}

Code for the first page:

import { dataSubmission } from ‘backend/submission’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {

});
export function button8_click ( event ) {
let payload = {
fullName : $w ( ‘#input1’ ). value ,
surname : $w ( ‘#input2’ ). value ,
email : $w ( ‘#input4’ ). value ,
telephone : $w ( ‘#input3’ ). value ,
instagram : $w ( ‘#input5’ ). value ,
profilePicture : $w ( ‘#uploadButton1’ ). value
};
dataSubmission ( payload )
. then ( () =>
{
wixLocation . to ( ‘/physical-profile-and-food-choices’ );
});

}

Code for the second page:

import { dataSubmission } from ‘backend/submission’ ;
import wixLocation from ‘wix-location’ ;
import { local } from ‘wix-storage’ ;

$w . onReady ( function () {
$w ( ‘#texttotal’ ). text = ‘calorias’ ;
$w ( ‘#buttoncontinue’ ). label = ‘Continue’ ;

$w ( '#buttoncontinue' ). onClick (() => { 
    //$w('#message').text = $w('#weight').value + $w('#height').value; 
 
  **let**  value  =  local . getItem ( "key" );  // "value" 
 
 **let**  inputValue1  =  Number ( $w ( "#weight" ). value ); 
 **let**  inputValue2  =  Number ( $w ( "#height" ). value ); 
 **let**  inputValue3  =  Number ( $w ( "#age" ). value ); 
 **let**  inputValue4  =  Number ( $w ( "#dropdown6" ). value ); 
 
 **let**  total  = ((( inputValue1  *  10 )+( 6.25 * inputValue2 )-( 5 * inputValue3 ))+ inputValue4 )* 1.375 ; 
     
     
**if** ( total  >  2500  &&  total  <  3000 ) { 
 **let**  total  =  '2500kcal' ; 
 }  **else if**  ( total  > 2000  &&  total  < 2500 ) { 
 **let**  total  =  '2000kcal' ;

} else if ( total > 1500 && total < 2000 ) {
let total = ‘1500kcal’ ;
} else if ( total < 1500 ) {
let total = ‘1000kcal’ ;
} else {
let total = ‘3000kcal’ ;
}
$w ( “#texttotal” ). text = total . toLocaleString ();

let payload = {
objective : $w ( ‘#dropdown2’ ). value ,
gymHome : $w ( ‘#dropdown3’ ). label ,
height : $w ( ‘#height’ ). value ,
weight : $w ( ‘#weight’ ). value ,
age : $w ( ‘#age’ ). value ,
gender : $w ( ‘#dropdown6’ ). label ,
weightGoal : $w ( ‘#input7’ ). value ,
dietType : $w ( ‘#dropdown5’ ). label ,
calories : $w ( ‘#texttotal’ ). text

}; 
dataSubmission ( payload ) 
. then ( () =>

{
wixLocation . to ( ‘/profile’ );
}
);
});
});

Any help would be much appreciated

CODE-NINJA · October 3, 2022, 5:10pm

I think the easiest way would be to save your FIRST-PAGE-DATA into Wix-Storage.
Then loading the PAGE-1-DATA on PAGE-2 and joining the rest of PAGE-2-DATA on PAGE-2 .

import Wix-Storage-API on your page-1 and 2

import wixStorage from 'wix-storage';

create your payload → onClick-Event and add it to Wix-Storage (local or session).

PayLoad from PAGE-1:

let payload = {
    fullName: $w('#input1').value,
    surname: $w('#input2').value,
    email: $w('#input4').value,
    telephone: $w('#input3').value,
    instagram: $w('#input5').value,
    profilePicture: $w('#uploadButton1').value
};

SAVING into Wix-Storage:
wixStorage.local.setItem(key, value);

your key → “whatever-String”
your value = your PayLoad

wixStorage.local.setItem("key", payload);

Maybe you first also want to STRINGIFY your PayLoad before saving it into STORAGE.

let key = "myKey"

let value = JSON.stringify(payload);

wixStorage.local.setItem(key, value);

Your data is now inside Wix-Storage.

Now try to get data on PAGE-2 back from STORAGE.
getItem - Velo API Reference - Wix.com
Add more data to your existing payload…

payload.objective=$w('#dropdown2').value
payload.gymHome=$w('#dropdown3').label
payload.height=$w('#height').value,

Save your completed payload to DB…

export function dataSubmission(payload){ 
    returnwixData.insert('Members',payload,options);
}

johnny6packman · October 3, 2022, 5:48pm

Hi Velo-Ninja, Thank you for the reply. I have try it, but there is still something missing on my code. I cannot get the payload data from the first page to be submitted to the collection.
Please see the code updated, feel free to modify.

Code From page 1:
import { dataSubmission } from ‘backend/submission’ ;
import wixLocation from ‘wix-location’ ;
import wixStorage from ‘wix-storage’ ;

$w . onReady ( function () {
$w ( “#dataset1” ). onBeforeSave
$w ( “#dataset1” ). setFieldValue ( ‘fullName’ , ‘#input1’ );
$w ( “#dataset1” ). setFieldValue ( ‘surname’ , ‘#input2’ );
});

export function button8_click ( event ) {

    **let**  payload  = { 
        fullName :  $w ( '#input1' ). value , 
        surname :  $w ( '#input2' ). value , 
        email :  $w ( '#input4' ). value , 
        telephone :  $w ( '#input3' ). value , 
        instagram :  $w ( '#input5' ). value , 
        profilePicture :  $w ( '#uploadButton1' ). value 
    }; 
    **let**  key  =  "myKey" 
    **let**  value  =  JSON . stringify ( payload ); 
    wixStorage . local . setItem ( "key" ,  value ); 
    //dataSubmission(payload) 
    //.then( () => 
{ 
    wixLocation . to ( '/physical-profile-and-food-choices' ); 
} 

/*}else { 
    console.log('Please add a valid data'); 
}*/

}

Code from page 2:

import { dataSubmission } from ‘backend/submission’ ;
import wixLocation from ‘wix-location’ ;
import wixStorage from ‘wix-storage’ ;
import { local } from ‘wix-storage’ ;

$w . onReady ( function () {
$w ( ‘#texttotal’ ). text = ‘calorias’ ;
$w ( ‘#buttoncontinue’ ). label = ‘Continue’ ;

$w ( '#buttoncontinue' ). onClick (() => { 
    //$w('#message').text = $w('#weight').value + $w('#height').value; 
 
  **let**  value  =  local . getItem ( "key" );  // "value"

$w ( “#texttotal” ). text = total . toLocaleString ();

let payload = {

  /*fullName: $w('#input1').value, 
  surname: $w('#input2').value, 
  email: $w('#input4').value, 
  telephone: $w('#input3').value, 
  instagram: $w('#input5').value, 
  profilePicture: $w('#uploadButton1').value,*/ 
  
  objective :  $w ( '#dropdown2' ). value , 
  gymHome :  $w ( '#dropdown3' ). value , 
  height :  $w ( '#height' ). value , 
  weight :  $w ( '#weight' ). value , 
  age :  $w ( '#age' ). value , 
  gender :  $w ( '#dropdown6' ). value , 
  weightGoal :  $w ( '#input7' ). value , 
  dietType : $w ( '#dropdown5' ). value , 
  calories : $w ( '#texttotal' ). text 

  
}; 
dataSubmission ( payload ) 
. then ( () =>

{
wixLocation . to ( ‘/profile’ );
}
);
});
});

CODE-NINJA · October 3, 2022, 8:04pm

let key= "myKey" <--- you defined the key as --> "myKey"

But on page two, what do we have?

let value=local.getItem("key");// "value"

What do you want now to load ?

—> “key” ???
…or…
—> “myKey” ???

Also think about the STRINGIFY-process which you have done, before saving your payload inside STORAGE.

You will have to reverse this action on PAGE-2 (maybe);

let myPayload = JSON.parse("your Payload from STORAGE here")

johnny6packman · October 3, 2022, 8:23pm

I believe I understand the logic, but I cannot code it. I’m quite new to this
The first change is okay

let value = local.getItem("myKey"); // "value"

But I don’t know how to implement the other change:

let myPayload =JSON.parse(“your Payload from STORAGE here”)

I haven’t defined a myPayload before, just named it payload.
By your payload storage I don’t think you mean this? as input1, etc are not defined in page2

fullName: $w('#input1').value,
surname: $w('#input2').value,
email: $w('#input4').value,
telephone: $w('#input3').value,
instagram: $w('#input5').value,
profilePicture: $w('#uploadButton1').value

CODE-NINJA · October 3, 2022, 9:05pm

You saved all your payload into STORAGE from PAGE-1, right? Yes!
Then you get all that STRINGIFYED data back from storage.

Before you can use that data, you first have to convert it back …

let myPayloadDataFromPage1 = JSON.parse("your Payload from STORAGE here")

Congrats you have now your data on page-2.

What to do next?

Now you want to add more data to that data-package, right? Yes, right!

That means…we start to add more data to that package…

myPayloadDataFromPage1.fullName=$w('#input1').value;

You created just right now new data (fullName) inside the data-package!
object oriented programming starts somewhere here.

Topic		Replies	Views
Data Collection -- user input from multiple pages in same row? Ask the community code , question	3	344	March 10, 2021
Submit/Save Button adds inputs to two different databases. Ask the community code , question	1	246	July 10, 2018
Passing User input from 1 page to another Ask the community code , wix-forms , question	5	1377	September 16, 2019
wixData.Insert( creates three different rows in collection. Ask the community code , question	11	5242	February 1, 2021
Different rows in the same Form... Ask the community code , question	15	557	March 31, 2018

How to save inputs from different pages onto the same row of a database?

Related topics