我正在制作一個表格，詢問用戶他們喜歡什么樣的臺面“樣品”。
這是頁面：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 表單處理的問題，但我希望有一種解決方法。
uj5u.com熱心網友回復：
自己解決了，代碼如下。
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');
}
});
基本上，新方法是使用呼叫函式的自定義提交按鈕getForm()，而不是使用默認的表單提交按鈕。
問題是 Webflow 提交所有輸入，無論其名稱或值如何。
getForm()檢查每個input值以查看它是否有名稱，如果沒有，它會呼叫$.remove()簡單地將其從 DOM 中完全洗掉，然后最終通過 JavaScript 提交表單。看了我剛才說的，想了個辦法讓這個函式變短，不過沒關系：）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510390.html