Dynamic Pages with Code

Ask the community
, ,
1

Good day all,
I have a form for members to complete their profile. The form is quite long and rather than link it to one collection, I divided it in sections, each linked to a separate collection.
I checked with the Wix support team, and they tell me it is not possible to link the Submit button to multiple collections and should either put multiple Submit buttons on the form or code the page.
I have successfully coded the form to submit to multiple collections, here is an extract of the code:

import wixData from 'wix-data';

export function button4_click(event) {
 let toInsertCliDetails = {
 "dateOfBirth":   $w('#datePicker1').value,
 "ethnicity":   $w('#dropdown17').value,
 "relationshipStatus":   $w('#dropdown21').value,
 "financialStatus": $w('#dropdown18').value,
 "previousCounselling": $w('#dropdown22').value,
 "preferredLanguage": $w('#iLanguages').value,
 "cliTAndCs": $w('#checkbox1'),
 "addressLine1": $w('#input14'),
 "addressLine2": $w('#input15'),
 "city": $w('#input16'),
 "postcode": $w('#input17'),
 "state": $w('#input18'),
 "country": $w('#input19'),
};

wixData.insert("ClientDetails", toInsertCliDetails)
  .then( (results) => {
 let item = results; //see item below
    console.log("Cli Detail OK");
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
 let toInsertCliVisiting = {
 "monday":   $w('#checkbox3').value,
 "tuesday":   $w('#checkbox2').value,
 "wednesday":   $w('#checkbox8').value
};

wixData.insert("CliVisitingHours", toInsertCliVisiting)
  .then( (results) => {
 let item = results; //see item below
    console.log("Cli VIsiting OK");
  } )
  .catch( (err) => {
 let errorMsg = err;
  } ); 
}

I would love some suggestions to solve the following issues:

  1. if members click submit multiple times, multiple entries are created in the collection, instead of the existing one being updated
  2. if members navigate to a different page and come back to the form, the form does not read the collections to show the existing data, but it is reset
    Many thanks
2

That’s why the support team stated that “it is not possible to link the Submit button to multiple collections”. You can do this with code and the wix-data API.

3

Hi Yisrael, I am confused by your response. That’s what I said it in the first place, so I know the Submit button cannot be linked to multiple collections.
In any case, I now solved all points raised above through the API reference and some examples here in the forum. I am sure there are more elegant ways to solve the puzzle, but it works and I lack knowledge and experience to simplify it.

I am sharing the code below for those interested.

The one issue I still can’t figure out on this page is the following:

  • there are two checkboxes on the form that submit to one unique field in the collection with this code:
let profGender = [];
 if ($w('#checkboxMale').checked)
      profGender.push('Male');
 if ($w('#checkboxFemale').checked)
      profGender.push('Female');

When the member revisits the profile page, I can’t figure out a way for the data.query to read that field and pass it to the two checkboxes on the form.

Any suggestions?

Here is the full code as mentioned above:

import wixData from 'wix-data';
import wixUsers from 'wix-users';

export function button4_click (event) {
 let userId = wixUsers.currentUser.id;
  wixData.query("ClientDetails")
  .eq("_owner", userId)
  .find()
  .then((results) => {
 let items = results.items[0];
 if (results.items.length === 0){
 
 let profGender = [];
 if ($w('#checkboxMale').checked)
      profGender.push('Male');
 if ($w('#checkboxFemale').checked)
      profGender.push('Female');

 let sessionTypes = [];
 if ($w('#checkboxOnline').checked)
      sessionTypes.push('Online');
 if ($w('#checkboxFace').checked)
      sessionTypes.push('Face-to-Face');
 
 let toInsertCliDetails = {
 //...there is a long list of items here, so I am removing them to avoid overwhelming this post...
      };
      wixData.insert("ClientDetails", toInsertCliDetails)
      .then((results2) => {
 let item2 = results2;
        $w('#textSuccess').show();
      })
      .catch((err) => {
 let errorMsg = err;
      })
    }
 else {
 let currentItemId = items._id;
 
 let profGender = [];
 if ($w('#checkboxMale').checked)
      profGender.push('Male');
 if ($w('#checkboxFemale').checked)
      profGender.push('Female');

 let sessionTypes = [];
 if ($w('#checkboxOnline').checked)
      sessionTypes.push('Online');
 if ($w('#checkboxFace').checked)
      sessionTypes.push('Face-to-Face');

 let toUpdateCliDetails = {
 //...there is a long list of items here, so I am removing them to avoid overwhelming this post...
      };
      wixData.update("ClientDetails", toUpdateCliDetails)
      .then((results7) => {
 let item7 = results7;
        $w('#textSuccess').show();
      })
      .catch( (err) => {
 let errorMsg = err;
      } );
    }
  })
  wixData.query("CliVisitingHours")
  .eq("_owner", userId)
  .find()
  .then((results9) => {
 let items9 = results9.items[0];
 if (results9.items.length === 0) {
 let toInsertCliVisiting = {
 //...there is a long list of items here, so I am removing them to avoid overwhelming this post...
      };

      wixData.insert("CliVisitingHours", toInsertCliVisiting)
      .then((results8) => {
 let item8 = results8;
        $w('#textSuccess').show();
      })
      .catch((err) => {
 let errorMsg = err;
      })
    }
 else {
 let currentItemId2 = items9._id;

 let toUpdateCliVisiting = {
 //...there is a long list of items here, so I am removing them to avoid overwhelming this post...
      };

      wixData.update("CliVisitingHours", toUpdateCliVisiting)
      .then((results10) => {
 let item10 = results10;
        $w('#textSuccess').show();
      })
      .catch((err) => {
 let errorMsg = err;
      })
    }
  })
}

$w.onReady(() => {
  $w('#datasetCliDetails').onReady(() => {   
 let userId = wixUsers.currentUser.id;
   wixData.query("ClientDetails")
   .eq("_owner", userId)
   .find()
   .then((results) => {
 let items = results.items[0];
 if (results.items.length === 0){
     }
 else {
      $w('#dropdown17').value=results.items[0]['ethnicity'];
      $w('#dropdown21').value=results.items[0]['relationshipStatus'];
      $w('#dropdown18').value=results.items[0]['financialStatus'];
      $w('#dropdown22').value=results.items[0]['previousCounselling'];
      $w('#iAddressLine1').value=results.items[0]['addressLine1'];
      $w('#iAddressLine2').value=results.items[0]['addressLine2'];
      $w('#iCity').value=results.items[0]['city'];
      $w('#iPostcode').value=results.items[0]['postcode'];
      $w('#iState').value=results.items[0]['state'];
      $w('#iCountry').value=results.items[0]['country'];
      $w('#iLanguages').value=results.items[0]['preferredLanguage'];
      $w('#checkboxTandc').checked=results.items[0]['cliTAndCs'];
      $w('#datePicker1').value=results.items[0]['dateOfBirth'];
 //$w('#checkboxMale').checked=results.items[0] ['professionalsGender']; //this is the line I tried to bring in the checkbox value, but unsuccessfully
     }
   })
   })
   //[...removing a long section of the onready code that brings in values from another collection...]
   })
   })
 })