Service Request Form Help

I am building a website for a repair company in wix. I need a service request form where users can enter multiple equipment items that need service. Each equipment they enter will require several fields. After the user enters the info for one equipment, they need a button to “add another equipment item” so they can add all they need before they hit submit. This is time sensitive if anyone can help.

HELLO

I have this problem

https://phili434.wixsite.com/monsite-1

my code is thisone with a mistake :

import wixData from ‘wix-data’;

$w.onReady( function () {
uniqueDropDown1 ();
});

function uniqueDropDown1 (){
wixData.query(“dataset1”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#iRegion”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.region);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function region_change(event, $w) {
uniqueDropDown2();
$w(“#iDepartement”).enable();
}

function uniqueDropDown2 (){
wixData.query(“dataset1”)
.contains(“region”, $w(“#iRegion”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#iDepartement”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.departement);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function departement_change(event, $w) {
uniqueDropDown3();
$w(“#iVille”).enable();
}

function uniqueDropDown3 (){
wixData.query(“dataset1”)
.contains(“departement”, $w(“#iDepartement”).value)
.limit(10000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#iVille”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.ville);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function iVille_click(event, $w) {
filter($w(‘#iVille’).value);
}
function filter(title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘ville’, title));
}

export function reboot_click(event, $w) {
(‘ville’, $w(‘#iVille’).value = null )
$w(“#iVille”).resetValidityIndication();
(‘departement’, $w(‘#iDepartement’).value = null )
$w(“#iDepartement”).resetValidityIndication();
(‘region’, $w(‘#iRegion’).value = null )
$w(“#iRegion”).resetValidityIndication();
}

$w.onReady( function () {

$w('#reboot').onClick( function  () { 

    $w('#dataset1').setFilter(wixData.filter()); 

}) 

})

function text149_click(event) {
$w(‘#dataset1’).setFilter(wixData.filter());
$w(“#iVille”).value = “”
}

my database is attached

I want to delete duplicates in the following 3 dropdowns:

  1. région

  2. departement

  3. ville

and I want that when selecting

  1. a region, we display the departments of the region in dropdown 2, without duplicates

  2. a department, we display the cities of the department in the dropdown 3, without duplicates

can you help me

can you correct me the code, please

thank you very much

@ tn7hemme You can use the multistage form approach and keep the save and continue button disabled by default until all fields have been filled. You can also hide an add another item on load and enable it when all the form fields have been filled.