如何访问不是母版页 <form> 的 <form>？

Question

Winforms 开发人员转换为 Web 开发人员。我知道母版页有标签的部分，不清楚的是我的一个内容页面中是否可以有另一个。我一直在搜索这两个答案。我看到是的，如果只有一个具有 runat=server 就可以。问题是我有一个包含几个单选按钮的网页上有一个母版页。我有一个 .js 文件，如果我将名称发送到其中，它具有一个函数，它将循环通过表单中的控件以查看选择了哪个并返回所需的日期范围（MTD、QTD、YTD 等）。当我在非母版页网页上运行它时，它工作正常。但是，当我在具有母版页的网页上运行时，我似乎无法访问该元素。我尝试了getElementByID，我尝试循环浏览页面元素等。也许我做错了，我希望有人能纠正我。

这是我的 .js 文件中的代码，它可能有助于解释我想要做得更好。

var frmDateRanges = document.getElementById(formFieldName); 
var chosen;
var len = frmDateRanges.DateRanges.length;
for(i=0;i<len;i++) 
   {
    if(frmDateRanges.DateRanges[i].checked) 
      {
        chosen = frmDateRanges.DateRanges[i].value;
       }
    }

其中 formFieldName 是传递给函数的参数，而 DateRanges 是赋予单选按钮的名称值。

在我调用这个函数的按钮中，我有：onclick ="FunctionCall('frmDateRanges')" FunctionCall 仅用于描述目的，'frmDateRanges' 是给表单 action=""

的名称和 id

感谢您的帮助，因为我现在很难过。如果有更好的方法，请告诉我。

---

修剪了在客户端重新渲染的 HTML

var theForm = document.forms['aspnetForm'];

if (!theForm) { theForm = document.aspnetForm; } 函数 __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } }

 <form id = "frmDateRanges" action = "">
        <dl>
            <dt>&nbsp;Begin Date: &nbsp; &nbsp; End Date:</dt><dd><input name="ctl00$ContentPlaceHolder1$wpSettings$beginDT" type="text" id="ctl00_ContentPlaceHolder1_wpSettings_beginDT" style="width:67px;" />
                &nbsp;&nbsp;
                <input name="ctl00$ContentPlaceHolder1$wpSettings$endDT" type="text" id="ctl00_ContentPlaceHolder1_wpSettings_endDT" style="width:67px;" />
                &nbsp;
                <input id="btnBackOneDateRange" name = "btnBackOneDateRange" style="width: 20px; height: 21px" type="button"
                    value="<" onclick="BackOneDateRange('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT', 'frmDateRanges');"/>
                <input id="btnForwardOneDateRange" style="width: 20px; height: 21px" type="button"
                    value=">" /></dd><dd>

                        &nbsp;
                        <input type="radio" id="btnTrl1Yr" name="DateRanges" style="width: 19px"  value="1" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','1');" />
                        1 Year
                        <input type="radio" id="btnTrl3Yr" name="DateRanges" style="width: 19px"  value="3" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','3');" />
                        3 Years &nbsp;
                        <input type="radio" id="btnTrl5Yr" name="DateRanges" style="width: 19px"  value="5" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','5');" />
                        5 Years
                        <input type="radio" id="btnTrl10Yr" name="DateRanges" style="width: 19px"  value="10" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','10');" />
                        10 Years</dd><dt><input type="radio" id="btnMthToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetMonthToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Month&nbsp;
                            <input type="radio" id="btnQtrToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetQuarterToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Quarter &nbsp;<input type="radio" id="btnYearToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetYearToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Calendar Year</dt></dl>

      </div> 
   </form>

Answer 1

您的内容页面中只能有 1 个 runat=server 表单。与页面中的其他表单混在一起可能比它的价值更令人困惑，即使它是一个小的 HTML 控件唯一表单。

话虽如此，我认为您遇到的问题是，当您尝试访问内容页面中的 DOM 元素时，包含这些元素的母版页已经更改了您的所有 ID。如果您检查呈现的表单源，您将看到 id 元素现在预先添加了内容容器 id，如下所示：

这可能会导致您的 document.getElementById(formFieldName); 出现问题

Answer 2

有几点：

1. 嵌套<form> 元素是不合法的标记：一些浏览器在这方面比其他浏览器更宽松，但如果这样做，您会看到奇怪的行为。
2. 当使用低于 ASP.NET 4 的母版页时，您会注意到页面上呈现的控件 ID 与您在标记中为控件提供的 id 不完全匹配 - 它将根据在 DOM 树中标识内容占位符和（可能）其上方的任何其他容器。

如果可以，您应该尝试为您动态生成一些 JavaScript，这样您就可以输出服务器控件的 ClientID 属性，您可能必须传入 DateRange 收音机的名称按钮 - 当你声明一个 RadioButton 控件时，你应该给它一个 GroupName - 这样所有的单选按钮都具有相同的name（而不是 id），所以你可以传递第一个选项的名称

FunctionCall('<%=Option1.ClientID%>');

然后您可以在该对象上调用 document.GetElementById，并请求 .name 属性以获取单选按钮集合的名称，并使用该值调用 document.getElementsByName：

function FunctionCall(radioButtonId) {
  var radioButtonList = document.getElementById(radioButtonId).name;
  var radioButtons = document.getElementsByName(radioButtonList);
  // radioButtons is an array of input type=radio, iterate as needed.
}