Connect a Custom Code Form with a Collection List?

Hi there,

I wanted to know if it was possible to set up a collection list… inside a custom code component ?

I successfuly rewrote the html structure of a webflow form inside a custom code component.
Inside that custom code, I injected dynamic fields to replace the id and name of the current form. (see second screenshot)

The idea actuall works surprinsingly well as in my form setting on my webflow dashboard, I have a those forms being created dynamically (see third screenshot). Wich is great because for my project, people can choose to book up to 30 events…

The thing is, I still need to implement checkboxes into my form (inside the custom embed). The problem is those checkboxes are bein pulled from a multi-reference list contained in a collection list. I also successfuly pulled those checkboxes from that collection list in relation with the event page the user is on.

The only question now is, can I connect that collection list with the form ? Right now, those checkboxes aren’t inside the form structure, therefore not taken into consideration when clicking on the submit button.

Thank you for any lead or ideas :slight_smile:

Read-only link


ollec

Hi @anthonysalamin,

Just a suggestion (mileage may vary) is to create a check box in the form code, then populate the value of the checkbox in the form, with the value of the checkbox from the checkbox in the collection list, i.e. set the value of one checkbox, from another generated in the collection using jQuery

Maybe this article will help: Setting the value of checkbox to true or false with jQuery - Stack Overflow

2 Likes

Hi @cyberdave,

Yes, I think I’m a little bit over the top with those form at the moment but the possibilities Weblfow has to offer, is just so exciting ! I’ve been learning so much the last few days thanks to the community.

I did have a look at your stackoverflow link, really interesting this prop attribute. I tried to implement it in a simplified version of my form, but need to understand / find a way how to connect that script instructions to the actual submit button.

Maybe something like that ?

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

I found some really interesting informatino about that prop attribute on the jquery help page but still missing the part where the “insider checkbox” (within the form) populates the value it got from the “outsider checkbox” which is outside - obviously - the form :slight_smile:

I also thought of using the HTML5 “form” attribute which lets us reference an input field that is outside of a form tag like so:

<form id="myForm .... >
    <input type="submit" />
</form>
<input type="text" form="myForm" />

But I read that alternative has its limitation, with internet explorer for example… kind of sad :slight_smile:


Edit:
I also found this article on how to get the value of checked checkboxes.
Or this javascript article explaing how to get checkboxes’values.

For modern browser:

var checkedValue = document.querySelector('.outsider:checked').value;

By using jQuery:

var checkedValue = $('.outsider:checked').val();

Pure javascript:

var checkedValue = null; 
    var inputElements = document.getElementsByClassName('outsider');
    for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
               checkedValue = inputElements[i].value;
               break;
          }
    }

Another javascript:
Again, not sure how to link the function to my submit button

CheckboxHandler.isChecked = function (checkboxObj) {
  return(checkboxObj.checked == true);
};

Hello,

I have tried something new, just to understand how to capture value from outside a form.
I got inspired by a script and tweeked it to try fit my needs, still unsuccessful but getting closer.

<script>

// defines the variable for the form
var form = document.getElementById("reservation");

// add the checkbox with the id of "outsider" to the form submission
document.getElementById("outsider").addEventListener("click", function () {
  form.submit();
});

</script>

I must be missing a little something as the “outsider checkbox” :slight_smile: still isn’t “submited”