I have an ASPX page, which contains a form. That form has been given a name and and id. The aspx page also has a master page to which it is linked.

When the page is served up, both the name and id of the form are different. The name, for example, changes from "uploadForm" to "Form1"

The action of the form also appears to be altered.

What is the cause of this, and how can I prevent it?

The opening line of the aspx page is thus:

<%@ Page Language="C#" MasterPageFile="~/Modal.Master" AutoEventWireup="true" CodeBehind="UploadPage.aspx.cs" Inherits="WebConnect.UploadPage" %>

And the form tag is:

<form id="uploadForm" name="uploadForm" enctype="multipart/form-data" action="Upload.ashx" method="post">

When served, it appears as:

<form id="Form1" action="UploadPage.aspx" method="post">

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <form id="uploadForm" name="uploadForm" enctype="multipart/form-data" action="Upload.ashx" method="post">
        <div>
            File:
            <input id="file1" name="fileField" type="file" />
            <input id="objectID" name="objectID" type="hidden" />
            <input id="fieldID" name="fieldID" type="hidden" />
            <input id="submitType" name="submitType" type="hidden" />
            <progress id="uploadProgress" value="10" max="100" display="none"></progress>
            <button id="Html5Submit" type="button" onclick="AsyncSubmit()">Submit</button>
            <button id="Html4Submit" type="button" onclick= "SyncSubmit()">Submit</button>
        </div>
    </form>
    <div id="Html5Upload">
    </div>
</asp:Content>

• javascript
• asp.net

Rendered control renaming has been a well known problem in ASP.Net for a long time, and there's not a whole lot you can do to prevent it in WebForms. However, you can modify how your JavaScript is searching for the element by use of the ClientId property on Asp.Net elements.

var formId = '<%= uploadForm.ClientID %>';

Source: How to stop ASP.NET from changing IDs in order to use jQuery

In your JavaScript, just use that variable instead of 'uploadForm' and you're good to go.

I think you have nested forms, which is not allowed. The first form you see is the one in MasterPage and the second one, uploadForm, is dropped by browsers (the closing tag of uploadForm becomes the closing tag of Form1).

So you have to move uploadForm outside of the Form1 form.

I think the first question really is what is your intent? I'm trying to follow the comments/answers and I don't think its evident (but I may have missed it).

If you want to submit somewhere else other than postback to the same page (the default web forms behavior):

• If processing is server side, you can have as many button controls (runat="server") as you need each with its own postbackurl
• @RobRodi 's answer can be used if you want to do client side (Javascript) processing with server side controls
• You can use an standard html button (html button, not runat="server") and handle its click event entirely via client script (has nothing to do with form action).