Form: Multiple Choice Field

Discussion Ask a question
,
1

Hi,
I have created a form on my website for the purpose of a survey. I would like visitors to select multiple choices however I do not have the option within my editor to add a “multiple choice” selection field. Currently my options show:

‘Manage Fields’ > ‘Add New Field’ > ‘Selection’ > ‘Single Choice Field’ or ‘Dropdown Field’

I hope someone can help me add a ‘Multiple Choice Field’

Many thanks, Sarah

1 Like
2

I have the same question, anybody from #WixCode care to answer this, please?

1 Like
3

You can use multiple checkmark boxes for this. However it will require a little bit of advanced coding.

You can have an onChange or onClick event on the checkmark box to push the associated text or value inside an array, something like this:

var array = [];

export function checkbox1_change(event) {
 if($w("#checkbox1").checked === true) {
        array.push('Your Value Here')
    }
}

After this just store the array in your database or convert it to string first and then store.

3 Likes
4

Shan´s solution would work if more than 1 answer is possible. If, on the other hand, only 1 answer is allowed, you need a Radiobutton. It´s available from the editor (+ sign, user input, radio button). I do not know what this

‘Manage Fields’ > ‘Add New Field’ > ‘Selection’ > ‘Single Choice Field’ or ‘Dropdown Field’

is. Maybe a standard form?

1 Like
5

Radio button won’t work. We want the possibility of having multiple answers to one question. Thanks!

6

Thanks Shan.

7

Thanks Shan, I’ll give it a go.
And thanks Mariedyth for prompting this, I thought this would never get answered!

1 Like
8

HI guys
Custom multiple field using repeater

Used a repeater attached a checkbox and the text
than use array to push the value of the text
than join them with ", "(comma and space)
to save it as a string in the database

code

let budget = [];
$w.onReady(() =>{

$w('#checkboxBudget').onChange(event =>{
	let $item = $w.at(event.context);
	let budgetTxt = $item('#textBudget').text;
	if($item('#checkboxBudget').checked) {
		budget.push(budgetTxt);
	} else {
		let pos = budget.indexOf(budgetTxt);
		budget.splice(pos , 1);
	}
	console.log("budget", budget)
	$w('#dynamicDataset').setFieldValue("budget" , budget.length > 0 ?  budget.join(", ") :"")
});
});

checkboxBudget - checkbox id connected to the repeater
textBudget - text element id also connected to the repeater

Update the Selection from the database
To conv. the string into array and display it on the repeater again.
Use the following code

let budget = [];
$w.onReady(async function () {
	$w('#dynamicDataset').onReady(()=>{
		let designer = $w('#dynamicDataset').getCurrentItem();	
		updateBudget(designer.budget)
	});
});
function updateBudget(setBudget) {
	budget = setBudget ? setBudget.split(', ') : [];
	$w('#repeaterBudget').forEachItem(($item, itemData, i )=>{
		let currBudget = $item('#textBudget').text; //checkboxBudget
		console.log(currBudget, budget)
		if(budget.indexOf(currBudget) !== -1) $item('#checkboxBudget').checked = true; 
	});
	
}
2 Likes