Form: select 'Last Name' automatically selects 'First Name'

Ask the community
, ,
1

I created a form as per attached. ‘Last Name’ and ‘First Name’ both come from drop-down menu of my Directory database. I want the ‘First Name’ (or 'Last Name) to be then automatically recognized once ‘Last Name’ (or ‘First Name’) is called.
Attention: some of my members have same last names (husbands and wives) and many have same first names …
I have tried several sort of codes, none of them works (below is last bit of attempt …).
Can anyone assist?

Thanks,

1366×768 239 KB

2

Hi There,

If I understand correctly, you want to filter the dropdown options when depending on another dropdown option.
For example, if you have the following members:
John Doe, Jane Doe and Michael Jordan
Then selecting the dropdown of ‘Last Name’ to be ‘Doe’ will force the dropdown of first name to offer ‘John’ and ‘Jane’.

This can be achieved using code.
You should use dropdown onChange method to check the selected value and filter the options for the other dropdown.
See Array.filter() .

Hope this helps,
Liran.

3

Dear Liran,

Thank you very much. Your understanding is correct. I would add that if you select ‘Michael’ as first name, then dropdown for last name should automatically be ‘Jordan’.

I do not have coding skills so i would need further assistance …
I started as by first importing wixdata, then:

Const lastname = [$w(“#lastname”).onChange ()];
let (“#firstname” = lastname.filter($w(“#firstname”));

Of course, it does … not work. Also, I really do not figure out how to use the options function.

Your further help will be very much appreciated. Thanks a lot

OO

4

Hey,

Here’s an example how you can approach that for last name, for the first name it’s basically the same.

I made it made with an assumption that you have dataset with relevant data on your page, here I used name #dataset1, because it works much faster than wixData.query(). If not you don’t have dataset on page you’ll have to use a little different approach using wixData.query() method or add relevant dataset instead.

// onChange handler for lastName dropdown
export function lastNameDropdown_change(event) {
  // First of all we need to get the new value selected on last name dropdown
  const lastName = event.target.value;
  
  // Use your dataset name here 
  // it has to be dataset that has last names and first names data
  // if you want to use it earlier like in page onReady handler
  // it's better to make sure by running this code in 
  // $w('#dataset1').onReady() handler 
  $w('#dataset1') 
  // Get the items in the dataset, it returns GetItemsResult structure
  // which is basically an object that has 2 field items and totalCount
  .getItems()
  // here we remove all the elements that not relevant
  // result.items will get us array of all data enries
  // it is an object that represents the relevant row from collection
  // then we use Array.filter() method to find only the rows with the same last name
  // use last name column key from your collection it may be different last_name, lastname etc.
  .then(result => result.items.filter(row => row.lastName === lastName))
  // after this we should have array of items with the same last names that selected
  // in order to set dropdown options we need to transform it to options array
  // options look like { label: 'label that user will see', value: 'value that you will get'}
  // in order to do it we can use Array.map()
  // again make sure that you use key from your collection for first anem
  .then(items => 
    items.map(item => ({label: item.firstName, value: item.firstName })
   ))
   // after this we use our array of options and set for dropdown element
   .then(firstNameOptions => $w('#firstNameDropdown').options = firstNameOptions);
}

Links:

5

Hi Maksim,
It works great, thank you so, so much. Only thing left is to then reset both dropdowns as they kept their last values after submitting.
Would you mind sending me yr email address (eric_pel@yahoo.fr) as i might need some additional consulting (which I will pay a small fee for)?
Thank you again very much

6

I built a professional database and each one has a dynamic page. In addition I built a database of portfolios. I try to build a form page to enter jobs for the portfolio, but of course I want every professional to enter only for himself. For example, when the professional is on a dynamic page, he clicks on a button that opens a form page to insert jobs into his file, and the jobs will be associated with his file. This means that another field will automatically fill in the ‘professional’ and then on his dynamic page all his jobs will be displayed when I filter To a database by ‘professional’.