Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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 :
    Code:
    <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:

    Code:
    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) :

    Code:
    <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 !

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have done some more tests. I found a solution for IE which is to remove the jquery click handler :
    Code:
    <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.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.

    Code:
    $('#myForm').submit(function() {
      alert('Handler for .submit() called.');
      // return false;
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the idea, I have tested that:
    Code:
                    $('#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):

    Code:
    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:
    Code:
    <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>

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you are using this:

    Code:
                    $('#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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •