Dynamic checkboxes in form with value of collection items [SOLVED]

[ElviraNL (Elvira Clement)]

Hello,

I’m trying to create a form where I use CMS data to create checkbox options.
However, when I fill in the form, I get a “CMS-item”:true, instead of the values that are selected.

Can someone help me out?

Already figured in out.

[Wells]

What was the solution

[ElviraNL (Elvira Clement)]

Hi Wells,

I added a collection list to the form.

which created this:

added some css to make it look better:

and another HTML embed with this:
<input type="hidden" name="Artworknames">

than I add custom code to set the values of the selected checkboxes inside the hidden input field, before the form is send:

var checkedValues = "";
$.each($(".checkboxcontainer), function(){
	// get value of each checkbox and add a "," to it.
	checkedValues += $(this).val().trim()+',';
});
  
    
//remove the last ","   
var values = checkedValues.replace(/,(\s+)?$/, '');
// set values in hidden input field.
$('input[type="hidden"]').val(values); 

Which gets me this in my email:

[Alex_Avery (Alex)]

Well done! This seems to make sense, but I’m having a couple issues implementing.

Any chance you could send more detail of what this looks like in Webflow? I’m not understanding how .checkboxconatiner fits into this equation, and where you actually determine that these are not ALL values but ALL CHECKED values.

Thanks!

[Timothy.Houle]

I don’t understand where you put the “var checkedValues…” custom code. I tried it in the header and before body but none work. I still receive an email with true or false. I am not sure either what this .checkboxcontainer mean. It’s not referenced anywhere.

Anyway, I’m aware I’m not super advanced in code but this is why I use Webflow. It’d be amazing (and very Webflow-like) for a “simple” form like this to be doable natively without custom code.

[Adribel_Gonzalez]

@Timothy.Houle I just added an if to filter the values and only add to the array the checked ones:

 var checkedValues = "";
    $.each($(".checkboxcontainer"), function(){
      // get value of each checkbox and add a "," to it.
      if($(this).prop('checked') == true){
      checkedValues += $(this).val().trim()+',';
			}	
      
    });
    console.log(checkedValues);
    //remove the last ","   
    var values = checkedValues.replace(/,(\s+)?$/, '');
    // set values in hidden input field.
    $('input[type="hidden"]').val(values);