Hi everyone,
Can someone help me how to change the checkbox value?
This is my situation:
I am creating a form where users will need to select multiple solutions and i need the form to return the value of their selection instead of a boolean. I have created three checkboxes and the result of the selected checkbox is True i want to change that value into the label name.
First of all thank you for your reply. I know about this solution but our graphic designer decided the form to be with checkboxes so i must find some solution about it. Can i change the value thru Zapier formatter? If yes how can i do it? Does the value can be changed with some JS custom code?
Thanks again, looking forward for your response again.
Yes, you could use Zapier or Integromat to combine the fields into a single line of text. There could be a potential solution with custom code. Would you like me to move this post to the Custom Code category?
@matthewpmunger
Yes, you can move the post it may be useful for me. And can you please send me some instruction or tutorial how can i do it with Zapier? Thank you in advance.
<script>
document.addEventListener("DOMContentLoaded", function() {
// Set Form ID
var form = document.getElementById('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Target checkboxes by their specific name attributes or a class if they have one
var checkboxes = form.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
// Use the 'data-name' attribute for the checkbox value if it's checked
checkbox.value = checkbox.getAttribute('data-name');
} else {
// If a checkbox is not checked, you might decide to not submit it, or submit with a value indicating it's not checked
// Here, we're choosing not to modify unchecked checkboxes. Adjust according to your needs.
}
});
// Debug: Log the FormData to see what's being submitted. Remove this in production.
var formData = new FormData(form);
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
// Submit the form
form.submit();
});
});
</script>
Set the Webflow Checkbox Custom attribute to data-name=“the name you want to send instead of on/off”.
Instead of CheckboxName=“on”, you will receive CheckboxName=“whatever name you set in the custom attributes”. You will need to name each individual checkbox like this, and the script will replace “on” with the name you set.
