如何访问不是主页面<form>的<form>？

Question

Winforms开发人员转换为Web开发人员。我知道关于具有该标签的母版页的部分，但不清楚的是如果我可以或不能在我的内容页中拥有另一个。我一直在看这两个答案做搜索。我看到你可以，如果只有一个有runat =服务器。问题是我有一个包含多个单选按钮的网页上有一个母版页。我有一个.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”是赋予形式行动=“”

感谢您的帮助，因为我的名字和ID在这一点上难倒了。如果有更好的方法可以做到这一点，请让我知道。

---

下调HTML redered在客户端上

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

如果{ theForm = document.aspnetForm（theForm！）; } function __doPostBack（eventTarget，eventArgument）{（！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. 已经嵌套<form>元素是不合法的加价：有些浏览器比其他有关更多宽松，但你会看到奇怪的行为，如果你做到这一点。
2. 当在ASP.NET 4下使用主页面时，您会注意到页面上呈现的控件ID与您在标记中控制的id不完全匹配 - 它将根据ID进行更改内容占位符和（可能）其上的任何其他容器在DOM树中。

如果可以的话，你应该尝试有一些你的JavaScript为你动态生成的，这样你可以输出你的服务器控件的属性ClientID，你可能要在DATERANGE的名字来传递单选按钮 - 在声明单选按钮控制，你应该给它一个组名 - 这样所有的单选按钮具有相同的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. 
} 

Answer 2

你只能有1个RUNAT =在您的内容页面的服务器形式。即使只有一个小的HTML控件形式，在页面中混淆其他形式可能会比它的价值更混乱。

这就是说，我认为你遇到的问题是，当你尝试访问内容页面中的DOM元素时，包含元素的母版页已经改变了你的所有ID。如果您检查您的呈现形式来源，你会看到ID元素现在有内容容器的id前置于这样的：

<输入ID =“contentAreaId_controlID” />

可能引起你的问题与文件。的getElementById（formFieldName）;