防止在表單中提交表單輸入值

Question

我正在制作一個表格，詢問用戶他們喜歡什么樣的台面“樣品”。

這是頁面： https://topsc.webflow.io/pages/onboarding

我正在使用 Webflow CMS 和一些 jQuery 來自動命名用於切換是否喜歡某些樣本的復選框。 為了讓公司更容易看到已檢查的內容，我試圖阻止提交所有未檢查的復選框。 我知道為此構建了一個“選擇”表單輸入，但這不適用於此 UX 設置。

這是我為重寫所有“名稱”屬性並嘗試“禁用”輸入而編寫的代碼，但它們仍在提交中。

$('.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");
    }
});

表單提交數據仍然包含每個輸入的值，因此很難將其解析為人類哈哈。

這可能是 Webflow 表單處理的問題，但我希望無論哪種方式都能找到解決方法。

Answer 1

自己解決了，這是代碼。

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');

      }
});

基本上，新方法是使用調用 function getForm()的自定義提交按鈕，而不是使用默認的表單提交按鈕。

問題是 Webflow 提交所有輸入，而不管它們的名稱或值。

getForm()檢查每個input值以查看它是否有名稱，如果沒有，它會調用$.remove()將其從 DOM 中完全刪除，然后最終通過 JavaScript 提交表單。閱讀完我剛才的內容后說，我想到了一個辦法讓這個function變短，不過沒關系:)