如何从表单序列化中排除按钮和标签？

Posted 2023-05-09

【中文标题】如何从表单序列化中排除按钮和标签？

【英文标题】：How can I exclude a button and a label from form serialization?

【发布时间】：2019-08-09 12:42:03

【问题描述】：

我想使用表单序列化，但从序列化中排除按钮和标签。

这是我拥有的 javascript 的一个版本：

var saveBtn = document.getElementById("btnSaveButton");
var saveLbl = document.getElementById("lblSaveLabel");
var originalFormData = $("#MasterForm").not(saveBtn, saveLbl).serialize();
$("form :input").on('change keyup paste mouseup', function () 
    var newFormData = $("#MasterForm").serialize();
    if (originalFormData != newFormData) 
        //some code
     else 
        //some other code
    
);

参见：.not(saveBtn, saveLbl)

不排除按钮或标签。

谁能帮助我，让我知道如何从序列化中排除按钮和标签？

实际上发生的情况是，我根据用户是否对表单进行了任何更改，将显示从按钮切换到标签并返回。

更新更新

感谢您的回复...似乎有些不对劲...

这里可能有太多 html 无法发布...

使用 vb.net。我有一个母版页，其中有一个名为 Admin.aspx 的页面，其中有一个名为 Bundles.ascx 的用户控件。

在 Bundles.ascx 的代码中，我有这个 javascript：

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(prmRequest);
    prm.add_endRequest(prmRequest);
    function prmRequest(sender, args) 
       setupFormChangeCheck("btnSaveBundle", langId); 
   

在一个主 javascript 文件中，我有函数 setupFormChangeCheck，如下所示：

function setupFormChangeCheck(txtName, langId) 
    try 
        savebtnFnctn('dis', txtName, langId)
        var originalFormData = $("#MasterForm").serialize();
        $("form :input").on('change keyup paste mouseup', function () 
            var newFormData = $("#MasterForm").serialize();
            if (originalFormData != newFormData) 
                savebtnFnctn('en', txtName, langId)
             else 
                savebtnFnctn('dis', txtName, langId)
            
        );
     catch (err)  

在同一个主 javascript 文件中，我有函数 savebtnFunction，如下所示：

function savebtnFnctn(event, txtName, langId) 
    var saveBtn = document.getElementById(txtName);
    var saveLbl = document.getElementById(txtName.replace("btn", "lbl"));
    if (event == 'en') 
        saveBtn.style.display = "inline";
        saveLbl.style.display = "none";
     else if (event == 'dis') 
        saveBtn.style.display = "none";
        saveLbl.style.display = "inline";
    

用户控件是动态加载的，因为同一个页面有多个使用控件，除非我动态加载一个控件，否则所有加载...都会使事情变慢。

动态加载用户控件会导致严重的回发挑战。因此，绝大多数用户控件交互都是使用 jquery 在客户端处理的。对于 Bundle.ascx，这是在 Bundle.js 中完成的

太棒了....

当加载用户控件时，setupFormChangeCheck 会触发，它会在函数 savebtnFnctn 中运行“dis”（禁用）事件。

这是我今天在尝试上述建议中的代码时注意到的问题。

当我在 Bundle uc 中进行交互时，setupFormChangeCheck 不会从一开始就触发。首先触发的是这一行 $("form :input").on('change keyup paste mouseup', function ()

无论我做什么，即使不更改任何内容，单击文本框也会导致： originalFormData != newFormData 为 true 并且“保存”按钮保持启用...

我应该补充一点，Bundle 用户控件中的所有控件都在更新面板中：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

我知道很长的解释，对不起......如果有人有任何想法来解决这个问题，我将永远感激不尽。

谢谢。埃里克

【问题讨论】：

您能告诉我们您的表单 HTML 代码吗？

【参考方案1】：

jQuery 的 .not() 方法采用选择器，而不是元素。 此外，您匹配的是表单本身，而不是它的输入。

由于您确实知道要排除的元素的 ID，因此请改用它：

var data = $("#MasterForm").find("input, textarea, select").not("#btnSaveButton, #lblSaveLabel").serialize();

您选择表单。 然后选择下面的表单元素。 然后从集合中排除具体元素。 最后对结果进行序列化。

注意：您应该使用严格比较 !== 而不是 !=。

【讨论】：

另外，如果您使用 和 标签，那么 $("#MasterForm").find("input, textarea, select").serialize() 应该足以仅获取输入数据。跨度>