How to set custom values for checkbox fields in Webflow forms instead of just true/false? Answered

• 

  Marc Hudson

  • October 28, 2023 14:43

  Here’s a simplified version of what I use. I send with AJAX to Make, so I found this problem with multi-select fields as well as checkbox (maybe radios too…, can’t remember).

  If you add an ajax-submit class to your form and change the checkbox names to color[]="blue" color[]="red" , etc… it should send through the values for you.

  You could further simplify this code.

  <script>
  const getFormValues = function($form, type) {
      var formData = new FormData($form[0]),
          groupedArrays = {};
      
      // Re-build certain field's values.
      $($form).find(':input').each(function() {
          var $element = $(this),
              key = $element.attr('name'),
              value = $element.val();
          
          // Re-build multi-select values.
          if ($element.is('select[multiple]')) {
              formData.set(key, $element.val());
          }
          // Re-build checkbox values for grouped elements.
          else if ($element.is(':checkbox:checked') && key.endsWith('[]')) {// Check if checkbox name ends with [].
              var elementName = key.slice(0, -2);// Remove [].
              if (!groupedArrays[elementName]) {
                  groupedArrays[elementName] = [];// Create array if not present.
              }
              groupedArrays[elementName].push(value);
              formData.delete(key);// Remove the individual entry.
          }
      });
      // Merge rebuilt groupedArrays into formData.
      for (elementName in groupedArrays) {
          formData.set(elementName, groupedArrays[elementName]);
      }
  
      if (type == 'formData') {
          return formData;
      }
      if (type == 'json') {
          // Convert to JSON.
          return JSON.stringify(Object.fromEntries(formData));
      }
      // JS Object.
      return Object.fromEntries(formData);
  };
  
  
  $(function() {
  //  General AJAX form submit handler.
  $('.ajax-submit').on('submit', function(e) {
      e.preventDefault();
  
      var $form = $(this),
          data = getFormValues($form);
  
      console.log(data);
  
      $.ajax({
          url: $form.attr('action'),
          method: $form.attr('method'),
          data: data,
          success: function(data, textStatus) {
              console.log(textStatus, data);
          },
          error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
          }
      });
  });
  });
  </script>

  0

Please sign in to leave a comment.