I am new in coding and I need help in a piece of code to develop a form that shows and gets data from an user
Basically I have a form with two drop downs where the user could choose between those two options
The first dropdown show some general options (this drop pdown activates the second one when an option is selected)
The second dropdown contains sub-options depending on the first item selected in the previous dropdown.
the first dropdown correspond to a committee of the UN and the second one to some countries that could be in that committee, so one committee could have the same and/or different countries as other.
What I basically need it’s that: when an user clicks on the submit button after choosing two options in the drop downs, the option inter second dropdown
(The country) is set it in the database as “selected” so another user can not see it or select it later in the form.
For this propuse in my database I have 3 fields: one for the committee, another for the name of the country in the corresponding committee and a third one for the state of that country in specific (selected by an user or free to select: for this I used a Boolean type in the field). I want to always show the committees even if they don’t have options left.
I know this seems really easy (maybe using an if statement or something) but it’s really complicated for me and I am really frustrated right now. So I want to know if some one could help me with the code! If you have any question just let me know!
I add my code for the dropdowns and an image of my database!
Thank you for the help!
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("ComitesyPaises")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Comite").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.comite);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function Comite_change(event, $w) {
uniqueDropDown2();
$w("#PaisComite").enable();
}
function uniqueDropDown2 (){
wixData.query("ComitesyPaises")
.contains("comite", $w("#Comite").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#PaisComite").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.paisComite);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
1 Like
Hey
I do remember first time I had similar situation as this and how frustrating it can be populating dropdowns.
I do see a couple of things there might be the issues for the code.
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.paisComite);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
These functions are being called by your unique dropdown functions to get unique titles when populating dropdowns. through the lines
const uniqueTitles = getUniqueTitles(results.items);
$w("#PaisComite").options = buildOptions(uniqueTitles);
But both dropdown functions have them. instead you only need one each of these functions.
Also to make them work
function uniqueDropDown1 (){
wixData.query("ComitesyPaises")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Comite").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.comite);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
} <---- this
(if im counting correctly) the arrow closes uniqueDropDown1() meaning the functions are inside a function. you only want a single of these two functions as previously mentioned and you want them outside so both uniqueDropdown1 and uniqueDropdown2 is able to call them.
Hope this helps, if there is still issues feel free to give an update.
best regards
Claes
1 Like
Thank You for your help I made the changes that you said! Claes you are really kind, my code is working well!.
Now I have an issue. Its there any way to have a code (I can not find an example) that allows the user to only see the options in the second dropdown (which corresponds to the countries) that have not been selected yet by a previous user?.
Remember that this is a form that is submitted, so the options that are selected in the dropdowns are saved in a DB.
I just want to show in the second dropdown the remaining countries that are available to choose.
For this I thought that I needed an extra field in my DB (See the previous image) that is boolean type, so it places a 1 (or a check in the check box) next to the the country field that have been already registered by an user and a 0 in the ones that are available to choose. I thought that a code like this could work but I don’t know how to write it:
(For the second Dropdown)
If: The country has been register
then: do not show to the new users
its there any code that I can use?
Thank you for your help and patience!
Hey again Javeth.
What your requesting is completely possible and your even on the right track. Dropdown2 gets its information from a wix query, now if you use boolean as suggested and a .eq
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#eq
you can make it only be populated by the options from a dataset that has a boolean value as false because its never been picked.
of course when selected and submitted you then add a line which make the choice true and the next person will no longer see the option.
Thank you Claes!
Don’t you have the code that can help me? because I don’t quite understand completely the .eq or the other query’s that I need to add…
Thank you for all your help!
Or I just need to add in my second dropdown this line?
function uniqueDropDown1 (){
wixData.query("ComitesyPaises")
.limit(1000)
.eq(false, "state")
.find()
.then(results => {
By the way I don’t know if I am specifying the items correctly inside the .eq()
@deleteduser Thank you! and is that all what I need to only show the elements that are false (= not previously selected by an user)?
Hi @deleteduser and @clsnlsen thank you for all your help!
I am having a trouble with the last part of my code that we talked about.
When I try to submit a value that I choose form the counties dropdown I want to place this value as Boolean type, but not in his column but in the one that its next to it: the “state” column. I am using the following code:
$w.onReady(function () {
$w("#Registro").onClick((event) => {
$w("#ComitesyPaises").setFieldValue("state", true)
$w("#ComitesyPaises").save()
But when I save the form I only get populated the first field of my column “state” and not the one that corresponds to the option that I selected in the column country. Lets say: I choose the country USA in my form, which corresponds to the second option in my country column in the database. When I click the submit button the first field in “state” is checked, and not the second field (the one that corresponds to USA, my selected option)!
I don’t know what more add! Thank for your kind help!
Hey Again @javeth31
You are using setfieldvalue correctly, but only setting state. There is no where for the “code” to receive the country value.
So simple
$w("#Registro").onClick((event) => {
$w("#ComitesyPaises").setFieldValue("state", true)
$w("#ComitesyPaises").setFieldValue() <--- Insert values here that set country
$w("#ComitesyPaises").save()
Insert the reference key of country and what the value in dropdown have been choosen as.
Also you might get issues when you publish if you forget to end lines correctly with ; just a headsup.
Hi again @clsnlsen Thank you for your answer!
I tested the code and its working partially, I am having some issues:
$w.onReady(function () {
$w("#Registro").onClick((event) => {
$w("#ComitesyPaises").setFieldValue("state", true);
$w("#ComitesyPaises").setFieldValue("paisComite",$w("#PaisComite").value);
$w("#ComitesyPaises").save();
});
Now I can set the country that I choose in the dropdown as “true” in the state column (that is awesome) but:
I can only set one option in the column state as true, this because when I submit another form the last option that I made its replaced by my new option, and I don’t want this, I want to have “various fields as true in my state column”
Also, when I clicked the submitted button, the option that I selected in the dropdown replaces the value in the first field of my country column. I don’t know if this Is because I am using the $w(“#PaisComite”).value + the SetFieldValue wrong. (Lets say that my first item in the country column is USA, but in the dropdown I selected France, so when I click submit, the USA name is repacked in my column for the France name)
Thank you for all your help!
