"Add more fields" button in user input form

Ask the community
,
1

I am making a site with a directory of local clinics. The owners of clinics can input the information of their clinic and respective doctors into my database collection through a user input form. However, as some clinics have 1 doctor while others have multiple doctors, i would like to have a form where users can click a “add another doctor” button, and new fields will appear for them to fill in the information of more doctors, and each doctor’s information will be automatically added to my doctors database collection.

If you have other suggestions for the form to be able to accommodate an input of any number of doctors within 1 form submission, that would be welcome too. Thanks!

2

Have your form’s user input elements inside a repeater. Have a submit button outside the repeater for the final submission. By default, show only 1 item in the repeater.

To “add another doctor” have a button which will add another item to the repeater. You could use the following code to add another item to a repeater.

export function add_click(event) {
    let data = $w("#repeater1").data;
    let length = $w("#repeater1").data.length;
    let newId = Number(length + 1);
    let newlet = {
        _id: `item${newId}`
    };
    data.push(newlet);
    $w("#repeater1").data = data;
}

Similarly, have another button which will allow users to remove an item (an extra form) from the repeater. You can use the below code for removing an item.

export async function remove_click(event) {
    let data = $w("#repeater1").data;
    await data.pop();
    $w("#repeater1").data = data;
}

Finally on your submission button, use the repeater’s forEachItem & Wix Data’s insert() to submit every repeater item as a new item in your database.

3

Hi Shan, is this the way to configure the final submission ?:
$w( “#submit” ).onClick( () => {
$w( “#repeater1” ).forEachItem( ($item, itemData, index) => {
wixData.insert( “protocolsteps” , itemData)
})
})

Also, How can i make sure that the final submission won’t run if one of the required fields in the repeater is not filled?

Thanks!

4

Thank you for the example code. Although, I replaced the newId with a variable outside of this function to keep track of the number of the last item ID inserted because after removing an item you can end up with a duplicate item ID when you try to add a new item, which causes an error. So instead I increment the last item ID inserted and use that for the new item ID when adding items.

5

@shantanukumar847 Thank you for the above…hopefully you can assist me or point me to one of your video’s that can help me achieve what I am trying to do. I am not an expert coder so input for has all the data elements but I am now stuck…

I want to add a “Add Icon” that once clicked creates additional data input fields
I see the code above but what I am not sure about is the following…does this automatically generate additional fields in my content manager?
Does it automatically connect my dataset?

Have a puiblished a video that actually shows this that I could watch? if yes please could you post below

Thank you

6

Hi, I would like to know, what’s the code for the submit button. Because I have multiple repeater input fields in my form. I have to make sure that every input datas in the fields are collected.