为啥我的 html 表单中的数据没有提交？

Posted 2023-04-13

技术标签:

【中文标题】为啥我的 html 表单中的数据没有提交？【英文标题】：Why is the data from my html form not submitting?为什么我的 html 表单中的数据没有提交？ 【发布时间】：2010-10-17 22:46:29 【问题描述】：

我正在开发 asp.net mvc 应用程序。我在表单上有一个部分，当用户单击“添加新部件”按钮时，我会在其中动态添加一些文本框。问题是当我提交表单时，我没有从我动态添加的字段中获取数据。我将 FormCollection 传递给我的控制器并单步执行调试器中的代码，但这些字段不存在。如果我在萤火虫中看它们，我会很好地看到它们。有任何想法吗？

这是用于将文本字段添加到页面的 javascript：

function moreFields() 
        var newFields = document.getElementById('readrootpu').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i = 0; i < newField.length; i++) 
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName;
        
        var insertHere = document.getElementById('newpartusageitems');
        insertHere.parentNode.insertBefore(newFields, insertHere);

这里是html：

<div id="readrootpu" class="usedparts" style="display: none">
    <% var fieldPrefix = "PartUsage[]."; %>
    Part ID:
    <%= Html.TextBox(fieldPrefix + "ID", "")%>
    Serial Number:
    <%= Html.TextBox(fieldPrefix + "Serial", "")%>
    Quantity:
    <%= Html.TextBox(fieldPrefix + "Quantity", "") %>
    <input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>

当我用 firebug 检查 html 时，它看起来不错：

Part ID: <input type="text" name="PartUsage[].ID" id="PartUsage[]_ID" value="" />
Serial Number: <input type="text" name="PartUsage[].Serial" id="PartUsage[]_Serial" value="" />
Quantity: <input type="text" name="PartUsage[].Quantity" id="PartUsage[]_Quantity" value="" />

想法？

【问题讨论】：

生成的 HTML 是什么样的？ 【参考方案1】：

使用 Firebug 验证所有帖子数据都是通过“网络”选项卡从页面发送的。

另外，我同意 Kobi 的观点：您需要增加克隆元素的 ID，以便它们是唯一的。

我建议您研究 jQuery 以动态创建 html 元素。我才刚刚开始学习 jQuery，它非常简单。下面的代码演示了一个简单的文件上传表单，它允许用户动态添加更多的输入元素。每次 jQuery 添加一个新的 input 元素时，我都会在 id 属性上附加一个 chr，因此它们都是唯一的。希望这对您有所帮助：

jQuery 的脚本块.. 注意最后一部分是 ajax 动画。实际的复制代码只是 $("#moreFiles").click 中的那 4 行代码

    <script type="text/javascript">
        var counter = "oneFile";
        $(document).ready(function() 
            $("#moreFiles").click(function() 
                var newCounter=counter+"1";
                $("p#"+counter).after("<p id='"+newCounter+"'><input type='file' name='"+newCounter+"' id='"+newCounter+"' size='60' /></p>");
                counter=newCounter;
            );
            $("#submitUpload").click(function() 
                $("#submitUpload").val("Uploading...");
                $("img.uploadingGif").show(); 
            );
        );
    </script>

..和 aspnet 标记：

    <% string postUrl = Model.PostUrl + (Model.ModelID > 0 ? "/" + Model.ModelID.ToString() : ""); %>
    <form id="uploadForm" class="uploadForm" action="<% =postUrl %>" 
        method="post" enctype="multipart/form-data">
        <label>Select file(s) for upload (size must not exceed 
            <% =Html.Encode(ServiceConstants.MAX_FILE_UPLOAD_SIZE_INBYTES) %> bytes):</label>  
        <p id="oneFile"><input type="file" name="oneFile" id="oneFile" size="60" /></p>
        <% if(Model.MultipleFiles)  %>
            <p><a id="moreFiles" href="#">add more files</a></p>
            <input id="MultipleFiles" type="hidden" name="MultipleFiles" value="true" />
        <%  %>
        <p><%--<input id="submitUpload" type="submit" value="Upload" />--%>
        <% =Html.InputSubmit("Upload","submitUpload") %>
            <% =Html.LoadingImage("uploadingGif") %>
    </form>

..这一切都归结为几行 html 和 jQuery。

【讨论】：

【参考方案2】：

当您在同名字段上有多个值时，您应该能够在服务器端使用Request.Form.GetValues("key") 看到它们。

您应该注意，当您克隆节点时，会创建具有相同 ID 的副本，这被认为是无效的。另外，您在那里有一个for 循环，我不太明白它的作用（读取节点的名称并将其设置回来 - 这样做的原因是什么？应该是var theName = newFields[i].name ?)

【讨论】：

【参考方案3】：

如果所有字段都留空，当我的表单工作正常时，我正在使用纯 HTML，但如果我填写表单，它将不会提交。

后来我意识到这是因为我在文本字段条目“电子邮件”中输入了一个包含字符“@”的电子邮件地址。当我删除“@”时，表单再次开始提交。

【讨论】：

【参考方案4】：

在没有相应的服务器端控件准备好从回发中读取数据的情况下，您不能随意地在客户端添加文本框。但是，您应该能够从 HttpRequest.Form 读取原始数据。