[IE7-8] Problem to submit a form in a popup

[orgoz]

Hello all,

It's my first post here, so I wish me the welcome :-)

I try to submit a form in a new popup, it is working well in FF and Chrome, but not in IE7-8.
I just have a form like this :

<div id="btn" class="btn" style="width: 70px;">
			<a id="mya">
				// some div here to build a button
			</a>
		</div>
		<form id="myForm"  method="POST"
			action="/mypage"
			accept-charset="ISO-8859-1" target='popup'
			onsubmit="window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes')">
			<input type="hidden" name="login" id="login" value="login">
			<input type="hidden" name="password" id="password" value="pwd">
		</form>

And a little bit of jQuery JS:

jQuery('#mya').click(
    $('#myForm').submit();
);

It seems very simple to me. FF and Chrome handle that correctly, but IE opens the popup and submit the form in the parent window.

Testing some workarounds, I made a mistake and wrote this HTML code (I wrote "options" in the window.open, which is of course not valid) :

<div id="ipanema-btn" class="btn" style="width: 70px;">
			<a id="ipanema-a">
				// some div here to build a button
			</a>
		</div>
		<form id="myForm"  method="POST"
			action="/mypage"
			accept-charset="ISO-8859-1" target='popup'
			onsubmit="window.open('', 'popup', options)">
			<input type="hidden" name="login" id="login" value="login">
			<input type="hidden" name="password" id="password" value="pwd">
		</form>

With this incorrect code, it work pretty great in IE too ! A popup is opened and the form is submitted in it, but of course the properties of the popup are not good (in all browsers).

Do someone have an idea to have this working with popup options in all browsers ?

Thank you very much !

[orgoz]

I have done some more tests. I found a solution for IE which is to remove the jquery click handler :

<div id="btn" class="btn" style="width: 70px;">
			<a id="mya" onclick="document.getElementById('myForm').submit();">
				// some div here to build a button
			</a>
		</div>
		<form id="myForm"  method="POST"
			action="/mypage"
			accept-charset="ISO-8859-1" target='popup'
			onsubmit="window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes')">
			<input type="hidden" name="login" id="login" value="login">
			<input type="hidden" name="password" id="password" value="pwd">
		</form>

But this is not working in FF ! It opens a new tab when clicking the button.

[AndrewGSW]

jQuery submit() does not trigger (should not trigger..) the onsubmit attribute/event. Instead of using the "onsubmit=" attribute you should use jQuery to attach a submit() event to the form.

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  // return false;
});

[orgoz]

Thanks for the idea, I have tested that:

                $('#mya').click(function () {
			$('#myForm').submit();
		});
		$('#myForm').submit(function() {
			window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes');
			return true;
		});

It is working in FF but not in IE, the form is submitted in the parent window.

So, the following code works in all browser but is browser dependent (and some code is duplicated):

function submitForm() {
	if(!$.browser.msie) {
		window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes');
	}
	document.getElementById('ipanemaForm').submit();
}

and the HTML:

<div id="btn" class="btn" style="width: 70px;">
			<a id="mya" onclick="submitForm();">
				// some div here to build a button
			</a>
		</div>
		<form id="myForm"  method="POST"
			action="/mypage"
			accept-charset="ISO-8859-1" target='popup'
			onsubmit="window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes')">
			<input type="hidden" name="login" id="login" value="login">
			<input type="hidden" name="password" id="password" value="pwd">
		</form>

[AndrewGSW]

If you are using this:

                $('#mya').click(function () {
			$('#myForm').submit();
		});
		$('#myForm').submit(function() {
			window.open('', 'popup', 'width=800,height=670,top=0,left=100,toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,status=yes');
			return true;
		});

then you must also remove the onsubmit attribute from your HTML.