Prevent a Form Input value from being submitted in the form

I’m working on a form that askes the user what kind of “samples” of countertops they like.

Here is the page: https://topsc.webflow.io/pages/onboarding

I’m using Webflow CMS and some jQuery to automatically name the checkboxes that toggle whether or not they like certain samples. To make it easier for the company to see what’s been checked, I’m trying to prevent all checkboxes that aren’t checked from being submitted at all. I know a “select” form input is built for this, but that won’t work for this UX setup.

Here is the code I wrote to rewrite all of the “name” attributes and an attempt to “disable” the inputs, but they’re still being submitted.

$('.checkbox').each(function() {
    $(this).siblings("div").children('input').attr("data-name", $(this).siblings('span').text());
    $(this).siblings("div").children('input').attr("name", $(this).siblings('span').text());
    $(this).siblings('div').children('input').attr("disabled", "disabled");
    $(this).attr("name", $(this).siblings('span').text());
    $(this).attr("data-name", $(this).siblings('span').text());
    
});
$('.checkbox').on('click', function() {
    if ($(this).prop("checked")) {
        $(this).siblings('div').children('input').removeAttr("disabled");
    } else {
        $(this).siblings('div').children('input').attr("disabled", "disabled");
    }
});

The form submission data contains values for every input still, making it hard to parse as a human lol.

This could be an issue with Webflow’s form handling, but I’m hoping for a workaround either way.

Answer

Solved it myself, here is the code.

function getForm() {
  $('.checkbox').each(function() {
    if ($(this).siblings("div").children('input').attr('name') == undefined) {$(this).siblings("div").remove();}
    if ($(this).prop('checked') != true) {$(this).remove();}
  });
  var formData = $('#email-form-2').serializeArray();
  console.log(formData);
  $('#email-form-2').submit();
}

$('.checkbox').each(function() {

      $(this).siblings('div').children('input').removeAttr('data-name');
      $(this).siblings('div').children('input').removeAttr('name');


      $(this).attr("name", $(this).siblings('span').text());
      $(this).attr("data-name", $(this).siblings('span').text());
});
$('.checkbox').on('click', function() {
    if ($(this).prop("checked")) {
        $(this).siblings("div").children('input').attr("data-name", $(this).siblings('span').text());
        $(this).siblings("div").children('input').attr("name", $(this).siblings('span').text());
    } else {
        $(this).siblings('div').children('input').removeAttr('data-name');
        $(this).siblings('div').children('input').removeAttr('name');

      }
});

Basically, the new approach is to use a custom submit button that calls the function getForm(), instead of using the default form submit button.

The problem is that Webflow submits ALL inputs regardless of their name or value.

getForm() checks each input value to see if it has a name, and if it doesn’t, it calls $.remove() to simply remove it from the DOM altogether before finally submitting the form via JavaScript. After reading what I just said, I thought of a way to make this function shorter, but that’s okay 🙂