How do I access a <form> that is not the master page <form>?

Question

Winforms developer converting to web developer. I know the part about the Master Page having the tag, what is not clear is if I can or can not have another in one of my content pages. I have been seeing both answers doing searches. I see yes you can if only one has runat=server. The thing is I have a that contains several radio buttons on a web page that has a master page. I have a .js file that has a function if I send the name into it, it will loop thru the controls in the form to see which one is selected and return the desired date horizon(MTD, QTD, YTD, etc.). When I run this on a non master page web page it works fine. However, when I run on a web page that has a master page I can't seem to get to the element. I tried getElementByID, I tried looping through the page elements, etc. Maybe I am going about this incorrectly and I hope someone can straighten me out.

Here is the code from my .js file that may help explain what I am trying to do a little better.

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;
       }
    }

where formFieldName is an arguement that is passed into the function and DateRanges is the name value given to the radio buttons.

In the button I call this function I have: onclick ="FunctionCall('frmDateRanges')" FunctionCall is just for description purposes, 'frmDateRanges' is the name and id given to the form action=""

Thanks for the help as I am stumped at this point. If there is a better way to do this please let me know that as well.

---

Trimmed down HTML redered on the client

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

if (!theForm) { theForm = document.aspnetForm; } function _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

You can only have 1 runat=server form in your content page. Messing around with other forms in the page can be more confusing than its worth, even if its a small HTML control only form.

That being said I think you are running into the issue that when you try to access a DOM element in a content page, the Master page that contains the elements has changed all your ID's. If you check your rendered form source you will see the id elements now have the content container id pre-pended like this:

< input id="contentAreaId_controlID" />

That may be causing your issue with document.getElementById(formFieldName);

Answer 2

A couple of things:

1. Having nested <form> elements isn't legal mark-up: some browsers are more lenient than others about this, but you will see odd behaviour if you do this.
2. When using masterpages below ASP.NET 4, you'll notice that the control id's that are rendered on the page do not exactly match the id that you gave the control in the markup - it will be changed depending on the id the content placeholder and (potentially) any other containers above it in the DOM tree.

If you can, you should try and have some of your JavaScript generated dynamically for you, that way you can output the ClientID property of your server controls, you'll probably have to pass in the name of the DateRange radio buttons - when you declare a RadioButton control you should give it a GroupName - that way all the radio buttons have the same name (rather than id), so you could potentially pass in the name of the first option

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

You can then call document.GetElementById on that object, and request the .name property to get the name of the radio button collection, and call document.getElementsByName with that value:

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.
}