IE not showing <form> tag in the literal text

Question

I am using a literal on my page which has an html form in it. this literal is displayed when a specific link is clicked, an overlay div is shown on the page and it shows the form on the overlay div. All browsers work fine and exactly as expected, but IE does not show anything on the overlay div i.e. the overlay div appears but is empty. I have tried adding tags to the literal control one by one to see which tag exactly is causing the issue and turned out that all the content (HTML input controls etc.) were shown on the overlay div until the <form> tag is added in the literal text.
If the literal.Text property does not have a <form> tag the content shows up fine in IE as well. But the problem is that I need to have this <form> inside the literal as i have to post the data back to an external link. When all other browsers are working fine, what could be the issue in IE?

following is the literal content when its set:

formSalesForce.Text = "<div style='clear:both'></div><h2 class='sIFR-replaced1' style='text-align:left'><embed height='20'  id='h2heading' width='282' src='frutiger_light.swf' quality='best' flashvars='txt=Document Description&amp;textalign=left&amp;offsetTop=0&amp;textcolor=#878787&amp;hovercolor=#76b404&amp;linkcolor=#87be22&amp;w=282&amp;h=20' wmode='transparent' bgcolor='transparent' sifr='true' type='application/x-shockwave-flash' class='sIFR-flash1' style='width: 282px; height: 20px;'/><span class='sIFR-alternate'>Document Description</span></h2>" + d.DocDescription + "<BR><p>Please fill out the following information so that we can proceed with providing you the link to the document</p><form  id='myDocForm' name='myDocForm' action='" + d.DataSubmissionPath + "' method='POST' ><table class='clearBoth' width='45%'><tr><td><input type=hidden name='oid' value='" + d.OID + "'></td><td><input type=hidden name='retURL' value='" + "" + "'></td></tr><tr><td class='formlabel' >First Name*</td><td class='formfield'><input type='text' id='first_name' size='20' maxlength='40' name='first_name'></td></tr><tr><td class='formlabel'>Last Name*</td><td class='formfield'><input type='text' id='last_name' size='20' maxlength='40' name='last_name'></td></tr><tr><td class='formlabel'>Email*</td><td class='formfield'><input type='text' id='email' size='20' maxlength='40' name='email'></td></tr><tr><td class='formlabel'>Work Title</td><td class='formfield'><input type='text' id='work_title' size='20' maxlength='40' name='work_title'></td></tr><tr><td class='formlabel'>Company</td><td class='formfield'><input type='text' id='company' size='20' maxlength='40' name='company'></td></tr><tr><td class='formbuttons'><input type='Button' name='btnsubmit' value='Submit' onclick='showDocPanel();'></td></tr></table></form>"

Answer 1

Nested Form not working in IE

Answer 2

I had to do the following workaround:

I used Request.Browser.Browser to check if the browser was IE... and then I modified the literal text to be the following:

 Dim s As New StringBuilder
    s.Append("<iframe name='myIframe' style='visibility:hidden;height:0;width:0;'></iframe><div style='clear:both'></div><h2 class='sIFR-replaced1' style='text-align:left'><embed height='20'  id='h2heading' width='282' src='swf/frutiger_light.swf' quality='best' flashvars='txt=Document Description&amp;textalign=left&amp;offsetTop=0&amp;textcolor=#878787&amp;hovercolor=#76b404&amp;linkcolor=#87be22&amp;w=282&amp;h=20' wmode='transparent' bgcolor='transparent' sifr='true' type='application/x-shockwave-flash' class='sIFR-flash1' style='width: 282px; height: 20px;'/><span class='sIFR-alternate'>Document Description</span></h2><p align='left'><i>" + d.DocDescription + "</i><BR><BR></p>")
    s.Append("<p>Please fill out the following information so that we can proceed with providing you the link to the document</p>")
    If (Not Request.Browser.Browser.Equals("IE")) Then
        s.Append("<form  id='myDocForm' name='myDocForm' target='myIframe' action='" + d.DataSubmissionPath + "' method='POST' >")
    End If

    s.Append("<table class='clearBoth' width='45%'><tr><td>")
    s.Append("<input type=hidden name='oid' id='oid' value='" + d.OID + "'></td><td>")
    s.Append("<input type=hidden name='retURL'  id='retURL' value='" + "" + "'></td></tr>")

    ' debug(info)
    s.Append("<input type='hidden' name='debug' value=1>")
    s.Append("<input type='hidden' name='debugEmail'")
    s.Append("value=''>")

    s.Append("<tr><td class='formlabel'>First Name*</td>")
    s.Append("<td class='formfield'><input type='text' id='first_name' size='20' maxlength='40' name='first_name'>")
    s.Append("</td></tr>")
    s.Append("<tr><td class='formlabel'>Last Name*</td>")
    s.Append("<td class='formfield'><input type='text' id='last_name' size='20' maxlength='40' name='last_name'>")
    s.Append("</td></tr>")
    s.Append("<tr><td class='formlabel'>Email*</td>")
    s.Append("<td class='formfield'><input type='text' id='email' size='20' maxlength='40' name='email'>")
    s.Append("</td></tr>")
    s.Append("<tr><td class='formlabel'>Work Title</td>")
    s.Append("<td class='formfield'><input type='text' id='work_title' size='20' maxlength='40' name='work_title'>")
    s.Append("</td></tr>")
    s.Append("<tr><td class='formlabel'>Company</td>")
    s.Append("<td class='formfield'><input type='text' id='company' size='20' maxlength='40' name='company'>")
    s.Append("</td></tr>")
    s.Append("<tr><td>&nbsp;</td>&nbsp;<td></td></tr>")     'empty row for spacer cells
    s.Append("<tr><td>&nbsp;</td><td class='formbuttons'  align='right'><input type='Button' id='btnsubmit' name='btnsubmit' value='Submit' onclick='showDocPanel();'>")
    s.Append("</td></tr>")
    s.Append("</table>")
    If (Not Request.Browser.Browser.Equals("IE")) Then
        s.Append("</form>")
    End If
formSalesForce.Text=s.ToString()

So the IE browser showed the table as there was no tag attached to the literal when IE was being used.

Now; when using IE, I had a concern to post the form to the external website, since there was no form, it couldnt be submitted...therefore I had to use a duplicate form created by javascript:

Used this javascript segment taken from this site: http://en.allexperts.com/q/Javascript-1520/create-form-submit-fly.htm

 function getNewSubmitForm(){
 var submitForm = document.createElement("FORM");
 document.body.appendChild(submitForm);
 submitForm.method = "POST";
 return submitForm;
}

//helper function to add elements to the form
function createNewFormElement(inputForm, elementName, elementValue){
 var newElement = document.createElement("<input name='"+elementName+"' id='" + elementName + "' type='hidden'>");
 inputForm.appendChild(newElement);
 newElement.value = elementValue;
 return newElement;
}

//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
//alert("form created");
createNewFormElement(submitForm, "oid", document.getElementById("oid").value);
createNewFormElement(submitForm, "debug", "1");
createNewFormElement(submitForm, "debugEmail", "");
createNewFormElement(submitForm, "first_name", document.getElementById("first_name").value);
createNewFormElement(submitForm, "last_name", document.getElementById("last_name").value);
createNewFormElement(submitForm, "email", document.getElementById("email").value);
createNewFormElement(submitForm, "work_title", document.getElementById("work_title").value);
createNewFormElement(submitForm, "company", document.getElementById("company").value);
createNewFormElement(submitForm, "retURL", window.location.href);
//alert(window.location.href + "::elements added");
submitForm.action= "my external website url";
submitForm.target='myIframe';
//alert("submitting");
submitForm.submit();
}

Now there was a postback occuring when the form submitted to the external url, to work that around I did:

• created a hidden iframe and appended it to the literal text (see the above code for the literal text)
• set the form target to be the name of that frame (see the above code for the literal text)
• set the target of the duplicated javascript form to be the name of that frame (see the above javascript code)