Add New Field on Frontend via Button

Ask the community
,
1

Hi Team, I am trying to build an input text field like below:

744×264 3.28 KB

I would like to add a button Add Description that will add another description filed in the frontend like this

746×502 6.06 KB

Also, if description ‘n’ is added, then I must be able to reference it via velo code.

How can I achieve something like above? User must click a button that adds a new element (text box in my example) in the front-end?

I am aware of Hide / Collapse element but in case if I want to add 35 Description boxes… then hiding / collapsing doesn’t seem to be a scalable option.

2

I’m not sure I fully understood the question, but you can do it with a repeater.
In the repeater item put a text element (for the title) and an input element.
Next to the repeater, put a Plus button (or ‘Add additional description’ button’).

And do something like:

const data = [{_id: '0', value: ''}];
$w.onReady(() => {
	$w('#repeater1').onItemReady(($i, iData, inx) => {
		$i('#titleText').text = 'Description ' + (inx + 1).toString();
		if(iData.value){$i('#input').value = iData.value;}
	})
	$w('#repeater1').data = data;
	$w('plusBtn').onClick(event => {
		data.push({_id: data.length.toString(), value: ''});
		$w('#repeater1').data = data;
	})
	$w('#input').onInput(event => {
		const $i = $w.at(event.context); 
		const iData= data.find(e => e._id == event.context.itemId);
		iData.value = $i('#input').value;
	})
})