I’ve spent way to much time trying to figure this out, and don’t really know what I’m doing, so hoping someone can help. Ideally, I’d like to have a repeater attached to a form so that when a user selects an item, and submits the form, I have a row with the user name, email and the items they selected. I’m not seeing an easy way to do it, and code so far is giving me trouble.
In my example, we have a volunteer directory. Our clients would look through the volunteers, select the ones they’d like to interview, and submit the request to our team so that we can set up a meet.
I tried not using a wixForm, and routed input to the database successfully, but can’t seem to figure out how to save the selected items to the database. Any thoughts?
Another route: just select the items, then put the names of the selected volunteers in an email body (found zero on this too so thought a database might be easier)
Inspecting your setup first.
You have a database, where you have stored all your volunteers (values/items).
Your DATABASE is connected trough a DATASET with your REPEATER.
Ok, Housten → we have a connection!
Now what to do next?
-disconnect all connected elements between DATASET & REPEATER which you have already setted-up.
Now we will do everything by → CODE.
…to be continued…
You will need something like this one…(example).
$w("#myRepeater").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#repeatedElement");
let nonRepeatedElement = $w("#nonRepeatedElement");
});
Now modifying to your needs..
$w("#repeater1").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#checkbox1");
let nonRepeatedInput1 = $w("#input1");
let nonRepeatedInput2 = $w("#input2");
repeatedElement.onChange(()=>{
console.log(index);
console.log(itemData);
});
});
Paste this code into the onReady-part check one of the checkboxes and take a look onto given results in console.
Thank you! Ok…follow up question. So my repeater is accessing data from Team dataset 2. I want to send input elements and the checkbox items to Family VR dataset (this is write only for form submission). In that database, I have “submission time”, “name”, “email” and then a column for “volunteers” (which is the column I’d like the list of volunteer names, or items-- or whatever setting gets me the choices-- to be). Do I set this as an array, object, referenced or multireferenced field? Also- how do I direct the filtered code from above into the Family VR dataset?
Can you please shown an screenshot of the related DATABASE and the related DATAFIELDS? First 2-3 rows of data are enough.
It is much easier, if i do not have to imagine and hold all your SETUP in my brain.
The better way is to have a visual look onto it → that makes things easier, especialy for my brain.
Do not forget, i do not sit infront of your PC and can see your PROJECT-SETUP.
See above for screenshot for the page view.
repeater database- I only need the name field in the second database.
database to put items in: wasn’t sure how to set up the volunteers column since checking repeaters would give an array (I think?).
family vr request database: name is “#input1”, and email is "#input2"elements
Did you already tried my showed code-setup ?
$w("#myRepeater").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#repeatedElement");
let nonRepeatedElement = $w("#nonRepeatedElement");
});
Now modifying to your needs..
$w("#repeater1").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#checkbox1");
let nonRepeatedInput1 = $w("#input1");
let nonRepeatedInput2 = $w("#input2");
repeatedElement.onChange(()=>{
console.log(index);
console.log(itemData);
});
});
Normaly you already should recognize your answer.
You want to save an OBJECT into your → “Volunteers”-DATAFIELD.
First you have to get the OBJECT, or to be more precise → to build the OBJECT, right?
How would look like your “VOLUNTEER_OBJECT” ?..
…this is what you will have to create first, to be able to write it into your wished (object)-DB-FIELD…
let myVolunteerObj = {
"volunteerName:" "Courtney",
"volunteerAge": "58",
"volunteerEmail: "coutney@rae5@velo.com",
"WhateverHere:" "xxxxxxxxxxxxxxxxxxxxxx"
}
ok…so it’s taken me a bit to get it to work (mostly). Here is my code that populates my repeater, and shows the selected Volunteer names in the console log successfully BUT… (see below for 2nd part of my question).
import wixData from ‘wix-data’ ;
let originalPropertiesInfo = [];
$w . onReady ( function () {
//Query to get the information from the database
wixData . query ( “Team” )
. find ()
. then (( results ) => {
originalPropertiesInfo = results . items ;
$w ( #teamRepeater ). data = originalPropertiesInfo ;
})
. catch (( err ) => {
let errorMsg = err ;
});
//Set the information to the repeater
$w ( #teamRepeater ). onItemReady (( $w , itemData ) => {
//add here all the relevant elements of the repeater
//In this case, I’ve added a text and an image to the repeater
$w ( #teamMemberName ). text = itemData . title ;
$w ( ‘#teamImage’ ). src = itemData . photo ;
$w ( ‘#jobTitle’ ). text = itemData . jobTitle ;
$w ( ‘#shortDescription’ ). text = itemData . shortDescription ;
$w ( ‘#text47’ ). text = itemData . generalAvailability ;
$w ( ‘#checkbox1’ ). value = ‘Meet me’ ;
});
//filter by checkbox
$w ( “#teamRepeater” ). onItemReady ( ( $item , itemData , index ) => {
let repeatedCheckbox = $item ( “#checkbox1” );
let nonRepeatedName = $w ( “#input1” );
let nonRepeatedEmail = $w ( “#input2” );
repeatedCheckbox . onChange (() => {
console . log ( itemData . title );
});
});
})
**What I need now is how to get the names that have been checked and are in the console log to save to my collection as an array. field is “volunteers” (as in pic above)
Well first of all…–> never use identival onReady-Commands more than once in your code —>
$w(`#teamRepeater`).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#teamMemberName`).text = itemData.title;
$w('#teamImage').src = itemData.photo;
$w('#jobTitle').text = itemData.jobTitle;
$w('#shortDescription').text = itemData.shortDescription;
$w('#text47').text = itemData.generalAvailability;
$w('#checkbox1').value = 'Meet me';
});
//filter by checkbox
$w("#teamRepeater").onItemReady( ($item, itemData, index) => {
let repeatedCheckbox = $item("#checkbox1");
let nonRepeatedName = $w("#input1");
let nonRepeatedEmail = $w("#input2");
repeatedCheckbox.onChange(() => {
console.log(itemData.title);
});
});
Your DATABASE…(…where to find the DB-Field -->title<-- in your DATABSE)?
Is the “Name” field in reallity the → “title” FIELD?
I would never mix IDs and NAMES → this causes choas.
If your DATAFIELD-NAME is —> “Name” → then the ID should be —> “name”
If your DATAFIELD-NAME is —> “Title” → then the ID should be —> “title”
Never mix them!
console.log(itemData.title);
So which OUTPUT do you get for the shown console-log above?
Also do not mix OBJECTs and ARRAYs.
Object = { } —> myObject = {“title”: “Mr.”, “firstname”: “Nice”, “lastname:” “Guy” }
Array = ----> myArray = [“xxxx”, “yyyy”, “zzzz”]
So perhaps you want to downgrade/switch your Volunteers DATAFIELD to → TAG-Field or ARRAY.
“title” ID refers to my volunteer’s “name” in Team database.
“name” ID refers to my customer’s name (the one filling out the form). That ID is connected to my Volunteer Request database.
When I click submit, I am successfully getting the name input and the email input registered in the Volunteer Request database, I just don’t know how to get the selected volunteer names in the console log to the field “volunteers” (same name and ID) and wasn’t sure how to set that up-- object, array, or reference? I’m lost there. Here is a screen shot of the console log.
Each time I click a checkbox, I successfully get the volunteer name in the log. I’d like to return something like “selectedVolunteer1, selectedVolunteer2, selectedVolunteer 3 etc.” in the volunteers field of the DB…just no clue how to go about that.
You surely want to see your console.log-result after you have changed the value of one of the given Checkboxes, right?
$w('#teamRepeater').onItemReady(($item, itemData, index) => {
console.log("ITEM_DATA: ", itemData), console.log("INDEX: ", index);
$item('#teamImage').src = itemData.photo;
$item('#teamMemberName').text = itemData.title;
$item('#jobTitle').text = itemData.jobTitle;
$item('#shortDescription').text = itemData.shortDescription;
$item('#text47').text = itemData.generalAvailability;
$item('#checkbox1').value = 'Meet ' + itemData.title;
$item("#checkbox1").onClick(()=>{
console.log(itemData.title);
console.log(itemData.jobTitle);
console.log(itemData.shortDescription);
//console.log($w("#input1").value);
//console.log($w("#input2").value);
//...and so on.....
});
});
Here is an upgraded version of yours… (no doubled → onItemReady<-- anymore.
And as i already mentioned → set-up your DATABASE the right way.
If your NAME for your DB-Field is → “Title”
Then also the ID of this DB-Field should be —> “title” and not name, or something else.
…or vice versa …!!!
$item('#teamMemberName').text = itemData.title;
Thanks! So, now I am adding
export function button1_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}
I want the itemData.title from the checked items to be saved to my ‘#dataset5’ database, named Volunteer Request. How do I call all results and string them so that they show up as name, name, name instead of each on their own line? Or…how can I get those names into my database?
So one other things you perhaps want to do is —> to collect all the values of selected Checkboxes.
Declaring a global variable… (array)
let myCollectedArray = []
And sorry —> it should be → onChange and not onClick!
$item("#checkbox1").onChange(()=>{
console.log(itemData.title);
console.log(itemData.jobTitle);
console.log(itemData.shortDescription);
let isChecked = $item('#checkbox1').checked;
if(isChecked) {myCollectedArray.push($item('#checkbox1').value)}
});
This way you fill an ARRAY with all selected (checked) values!
RESULT → myCollectedArray = [“Brian-Chung”, “Ashley-Amerson”, …and so on…]
Your question was to fast, but i already gave you another idea! Take alook above!
Here is what I have with added code for the array:
import wixData from ‘wix-data’ ;
let originalPropertiesInfo = ;
$w . onReady ( function () {
//Query to get the information from the database
wixData . query ( “Team” )
. find ()
. then (( results ) => {
originalPropertiesInfo = results . items ;
$w ( #teamRepeater ). data = originalPropertiesInfo ;
})
. catch (( err ) => {
let errorMsg = err ;
});
$w ( #teamRepeater ). onItemReady (( $item , itemData , index ) => {
console . log ( "ITEM_DATA: " , itemData ), console . log ( "INDEX: " , index );
$item ( ‘#teamImage’ ). src = itemData . photo ;
$item ( #teamMemberName ). text = itemData . title ;
$item ( ‘#jobTitle’ ). text = itemData . jobTitle ;
$item ( ‘#shortDescription’ ). text = itemData . shortDescription ;
$item ( ‘#text47’ ). text = itemData . generalAvailability ;
$item ( ‘#checkbox1’ ). value = ‘Meet me’ + itemData . title ;
let myCollectedArray = []
$item ( "#checkbox1" ). onChange (()=>{
let isChecked = $item ( '#checkbox1' ). checked ;
if ( isChecked ) { myCollectedArray . push ( $item ( ‘#checkbox1’ ). value );
console . log ( myCollectedArray );
$w ( “#dataset5” ). setFieldValue ( ‘volunteers’ , myCollectedArray )}
});
});
});
==> Issue now is that each checked box is creating its own array, rather than evaluating all checkboxes to one array. Also- only the last checked box’s item is being saved to the DB.
here is the console log:
Here is a copy of my DB result (my names changed a bit as I did and redid things but everything is connected correctly)
Sorry, my fault! It was not …
if(isChecked){myCollectedArray.push($item('#checkbox1').value);
…what you want…
…what you want is this…
if(isChecked){myCollectedArray.push(itemData.title); console.log(myCollectedArray);
I made the changes, but it is still saving each item as its own array [Brian Chung], [Ashley Amerson], [Brad Grecco] rather than [Brian Chung, Ashley Amerson, Brad Grecco].
and the last array (which is of just one itemData.title) sends to the DB so I don’t see all items selected…any thoughts?.
import wixData from 'wix-data';
let originalPropertiesInfo = [];
let myCollectedArray = []
$w.onReady(function () {
//Query to get the information from the database
wixData.query("Team")
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(`#teamRepeater`).data = originalPropertiesInfo;
})
.catch((err) => {let errorMsg = err;});
$w(`#teamRepeater`).onItemReady(($item, itemData, index) => {
console.log("INDEX: ", index);
console.log("ITEM_DATA: ", itemData);
//---------------------------------------------------------------
$item('#teamImage').src = itemData.photo;
$item(`#teamMemberName`).text = itemData.title;
$item('#jobTitle').text = itemData.jobTitle;
$item('#shortDescription').text = itemData.shortDescription;
$item('#text47').text = itemData.generalAvailability;
$item('#checkbox1').value = 'Meet me' + itemData.title;
//---------------------------------------------------------------
$item("#checkbox1").onChange(()=>{
let isChecked = $item('#checkbox1').checked;
if(isChecked) {console.log("Before --> PUSH! = ", myCollectedArray);
myCollectedArray.push(itemData.title);
console.log("After --> PUSH! = ", myCollectedArray);
$w("#dataset5").setFieldValue('volunteers', myCollectedArray)
}
});
//---------------------------------------------------------------
});
});
You will have to expand your CODE!!!
If is checked → Fill the Array!
if(isChecked) {console.log("Before --> PUSH! = ", myCollectedArray);
myCollectedArray.push(itemData.title);
console.log("After --> PUSH! = ", myCollectedArray);
$w("#dataset5").setFieldValue('volunteers', myCollectedArray)
}
What if not → isChecked? → What to do ?
else { ..... }
Else you will fill the ARRAY continuously!
And by the way—> please use CODE-TAGS when you show your code.
Clearly and good structured with a good overview for better READABILITY.
Like i do!
My code is simply readable???
