Using embedded standard HTML forms with ASP.NET

19,337

Solution 1

It's an interesting problem. Ideally you only want the 1 form tag on the page as other users have mentioned. Potentially you could post the data via javascript without having 2 form tags.

Example taken from here, modified for your needs. Not 100% sure if this will work for you but I think this is how you'll have to approach it.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">

function postdata()
{
   var fieldValue = document.getElementById("field1").value;
   postwith("http://someothersite.com",{field1:fieldValue});
}

function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
           <div>
                <input type="text" id="field1" name="field1" />
                <asp:Button ID="btnSubmitSubscribe" runat="server" Text="Submit" OnClientClick="postdata(); return false;" />

       </div>

</div>
</form>
</body>
</html>

If javascript is not a viable option - you can use .Net's HttpWebRequest object to create the post call in code behind. Would look something like this in the code behind (assuming your text field is an asp textbox:

private void OnSubscribeClick(object sender, System.EventArgs e)
{
string field1 = Field1.Text;


ASCIIEncoding encoding=new ASCIIEncoding();
string postData="field1="+field1 ;
byte[]  data = encoding.GetBytes(postData);

// Prepare web request...
HttpWebRequest myRequest =
  (HttpWebRequest)WebRequest.Create("http://someotherwebsite/");
myRequest.Method = "POST";
myRequest.ContentType="application/x-www-form-urlencoded";
myRequest.ContentLength = data.Length;
Stream newStream=myRequest.GetRequestStream();
// Send the data.
newStream.Write(data,0,data.Length);
newStream.Close();
}

Solution 2

If you add an ASP.NET button to the form, and set its PostBackUrl property to the external site, then all the form data will be posted to that URL.

Solution 3

Nested forms are not possible in HTML according to the W3C. You can achieve your intended result using JavaScript or with jQuery as explained by Peter on a blog called My Thoughts.

Solution 4

In my experience, Appetere Web Solutions has the best solution. Simple and elegant...and it's not a hack. Use the PostBackUrl.

I just tried it and everything works as expected. I didn't want to use Javascript because I didn't want to include it in my Master Page for every page that uses it.

Share:
19,337
Rosstified
Author by

Rosstified

Background in developing public safety systems through C++ and .NET. More recently moved into the consulting world in the .NET Architecture space.

Updated on July 16, 2022

Comments

  • Rosstified
    Rosstified almost 2 years

    I have a standard aspx page with which I need to add another standard HTML form into and have it submit to another location (external site), however whenever I press the submit button the page seems to do a post back rather than using the sub-forms action url.

    A mock up of what the form relationships is below. Note in the real deployment the form will be part of a content area of a master page layout, so the form needs to submit independantly from the master page form.

        <html xmlns="http://www.w3.org/1999/xhtml" >
           <head runat="server">
              <title>Untitled Page</title>
           </head>
           <body>
               <form id="form1" runat="server">
               <div>
                   <form id="subscribe_form" method="post" action="https://someothersite.com" name="em_subscribe_form" > 
                        <input type="text" id="field1" name="field1" />
                        <input id="submitsubform" type="submit" value="Submit" />
                   </form>
               </div>
               </form>
           </body>
       </html>
    
  • goldenratio
    goldenratio about 15 years
    Ah, nice. I knew there was a way to do it from code-behind. Thanks.
  • Rosstified
    Rosstified about 15 years
    Works beautifully. Thanks for this!
  • Mark B
    Mark B about 11 years
    That did it. I used this technique to post a form from a DNN HTML module.
  • Philip Stratford
    Philip Stratford over 10 years
    This, for me, is by far the simplest and neatest solution.
  • JoJo
    JoJo about 10 years
    @brendan Does this work if the user submits the form with the Enter Key?
  • JoJo
    JoJo about 10 years
    Brilliant! This does not break anything that I can tell. Good Job!!