X
XP
Hello Everyone,
I was stuck with this really frustrating problem for sometime. Let me
explain what I am trying to achieve: There is a form and an inner
iframe. The form's target is set to the iframe so that when the form
is submitted, the page does not get reloaded/changed ( as the iframe
would be the one getting refreshed. The Iframe is set to have 0 width
and height to make it look invisible ).
I have a copied the html source ( at the end ) to demonstrate this.
There are 2 form/iframe pair
a) Static form / iframe
b) Javascript generated form / iframe.
and both forms are submitted using javascript.
In firefox, both a) and b) works perfectly ( i.e there are no
popups / page reloads/ page change )
In IE, a) works fine BUT b) does not ( a popup is created when the
form is submitted )
I am failing to understand why b) is not working in IE ( i.e why
the popup is appearing ).
Could someone help me on this one ?
Thanks
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function badTest ( ) {
//document.getElementById ('upload_form_1234').submit();
document.forms['upload_form_1234'].submit();
}
function goodTest ( ) {
document.getElementById ('asd').submit();
}
function tryLoad ( ) {
var newDiv = document.createElement('div');
var newForm = document.createElement('form');
var uniqueId = '1234' ;
newForm.setAttribute('enctype','multipart/form-data') ;
newForm.setAttribute('id','upload_form_' + uniqueId ) ;
newForm.setAttribute('name','upload_form_' + uniqueId ) ;
newForm.setAttribute('method','post' ) ;
newForm.setAttribute('action','index.php/media/upload') ;
newForm.setAttribute('target','form_' + uniqueId + '_iframe') ;
var fileElement = document.createElement('input');
fileElement.setAttribute('type','file') ;
fileElement.setAttribute('id','image_file') ;
fileElement.setAttribute('name','image_file') ;
newForm.appendChild(fileElement);
newDiv.appendChild(newForm);
var iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('name','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('id','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('src','public/html/blank.html') ;
iFrameElement.setAttribute("style","border:0px;height:0px;width:
0px;padding:0px;position:absolute");
iFrameElement.style.border = 0 ;
iFrameElement.style.height = 0 ;
iFrameElement.style.width = 0 ;
iFrameElement.style.padding = 0 ;
iFrameElement.style.position = 'absolute' ;
newDiv.appendChild(iFrameElement);
document.getElementById ('uploadForms').appendChild ( newDiv ) ;
}
</script>
</head>
<body onload="tryLoad()">
<button onclick="goodTest()"> Good Test </button>
<form id="asd" enctype="multipart/form-data" method="post"
action="index.php" target="testframe">
<input type="file">
</form>
<iframe name="testframe" id="testframe" src="public/html/blank.html"
style="border:0;height:0;width:0;padding:0;position:'absolute' " >
</iframe>
<br/><br/><br/>
<button onclick="badTest()"> Bad IE Test </button>
<div id="uploadForms"> </div>
</body>
</html>
I was stuck with this really frustrating problem for sometime. Let me
explain what I am trying to achieve: There is a form and an inner
iframe. The form's target is set to the iframe so that when the form
is submitted, the page does not get reloaded/changed ( as the iframe
would be the one getting refreshed. The Iframe is set to have 0 width
and height to make it look invisible ).
I have a copied the html source ( at the end ) to demonstrate this.
There are 2 form/iframe pair
a) Static form / iframe
b) Javascript generated form / iframe.
and both forms are submitted using javascript.
In firefox, both a) and b) works perfectly ( i.e there are no
popups / page reloads/ page change )
In IE, a) works fine BUT b) does not ( a popup is created when the
form is submitted )
I am failing to understand why b) is not working in IE ( i.e why
the popup is appearing ).
Could someone help me on this one ?
Thanks
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function badTest ( ) {
//document.getElementById ('upload_form_1234').submit();
document.forms['upload_form_1234'].submit();
}
function goodTest ( ) {
document.getElementById ('asd').submit();
}
function tryLoad ( ) {
var newDiv = document.createElement('div');
var newForm = document.createElement('form');
var uniqueId = '1234' ;
newForm.setAttribute('enctype','multipart/form-data') ;
newForm.setAttribute('id','upload_form_' + uniqueId ) ;
newForm.setAttribute('name','upload_form_' + uniqueId ) ;
newForm.setAttribute('method','post' ) ;
newForm.setAttribute('action','index.php/media/upload') ;
newForm.setAttribute('target','form_' + uniqueId + '_iframe') ;
var fileElement = document.createElement('input');
fileElement.setAttribute('type','file') ;
fileElement.setAttribute('id','image_file') ;
fileElement.setAttribute('name','image_file') ;
newForm.appendChild(fileElement);
newDiv.appendChild(newForm);
var iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('name','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('id','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('src','public/html/blank.html') ;
iFrameElement.setAttribute("style","border:0px;height:0px;width:
0px;padding:0px;position:absolute");
iFrameElement.style.border = 0 ;
iFrameElement.style.height = 0 ;
iFrameElement.style.width = 0 ;
iFrameElement.style.padding = 0 ;
iFrameElement.style.position = 'absolute' ;
newDiv.appendChild(iFrameElement);
document.getElementById ('uploadForms').appendChild ( newDiv ) ;
}
</script>
</head>
<body onload="tryLoad()">
<button onclick="goodTest()"> Good Test </button>
<form id="asd" enctype="multipart/form-data" method="post"
action="index.php" target="testframe">
<input type="file">
</form>
<iframe name="testframe" id="testframe" src="public/html/blank.html"
style="border:0;height:0;width:0;padding:0;position:'absolute' " >
</iframe>
<br/><br/><br/>
<button onclick="badTest()"> Bad IE Test </button>
<div id="uploadForms"> </div>
</body>
</html>