Adding Dropdown.onChange() from Repeater to Database

Ask the community
,
1

Hey Velo Team, I would really appreciate some help in the situation I am in.

Website Preview Here

I have coded a button called Add Dog that creates new repeater items (max up to 3)

1062×179 14.1 KB

There is an Order Now button that has a click event. On Click, I want to be able to make sure all the required and displayed dropdowns are filled, if they are not filled, then it displays a warning message. Once it checks all the required dropdowns are filled, it then takes all the values from the displayed dropdowns and adds them to the database.

When I coded the check to see if dropdown values are empty, it never updates if a dropdown has been changed and therefore always displays the warning text. I am currently new to Wix repeaters so I also do not know how to iterate through its list and extract all the information and update them to the database. My code is shown below.


// Tilapia + Polenta - Adding a dog
export function tpAddDog_click(event) {
    let data = $w('#tpAddDogRepeater').data;
    let length = $w('#tpAddDogRepeater').data.length;
    let newId = Number(length + 1);
    let newlet = {
        _id: `item${newId}`
    };
    data.push(newlet);
    $w('#tpAddDogRepeater').data = data;
    if (length === 2) {
        $w('#tpAddDog').hide();
    }
}

// Tilapia + Polenta - Deleting a dog
export async function tpDeleteDog_click(event) {
    let data = $w('#tpAddDogRepeater').data;
    await data.pop();
    $w('#tpAddDogRepeater').data = data;
    $w('#tpAddDog').show();
}

// Tilapia + Polenta
// Check Missing Fields
export function tpOrderNowBtn_click(event) {
    if ($w('#tpDogSize').value === '') {
        $w('#tpWarningText').show();
    } else {
        $w('#tpOrderNowBtn').label = 'Please Wait';
        $w('#tpWarningText').hide();
    }
}

I would really appreciate any guidance on this workflow. The reason I have a Repeater for this is because, with the Add Dog button, I want to be able to add maximum 2 new fields after which it hides.

2

Can someone please help me with any insight as to the best workflow to achieve this?

3

Since you are using a repeater, you cannot reference the controls inside the repeater with $w. You’ll need to reference the controls from the context of each repeater row. The following code should to the trick.

function ValidateFields() {
let valid = true;
$w(‘#tpAddDogRepeater’).forEachItem(($item, itemData, index) => {
if ($item(‘#tpDogSize’).value === ‘’) valid = false;
});
return valid;
}

function tpOrderNowBtn_click(event) {
if (!ValidateFields()) {
$w(‘#tpWarningText’).show();
} else {
$w(‘#tpOrderNowBtn’).label = ‘Please Wait’;
$w(‘#tpWarningText’).hide();
}
}

4

Thank you for your help @robmich , I decided to go a more manual route instead of using repeaters. I now have 3 containers with the same content but different IDs and have 2 Add Dog Buttons to target each respectively.

This allows me to have a more fine-tuned control to acheive what I needed. Thank you for your input though, it keeps me straying away from Repeaters for a while :man_running:t4: