So I know this is a dumb question, but I haven't been able to find a precise answer to my specific issue. I have tried changing the submit button to a regular button and adding an onClick event... no dice. I am trying to submit a form to a new, custom-sized window (so not a new tab in Chrome, etc). I have gotten it so it opens the submitted form data on the new page in a new window, but the custom sized-window is also opened as a blank page.

<form action="Upload.cfm" target="_blank" enctype="multipart/form-data" method="post" onSubmit="window.open('', 'mywindow3','left=0,width=900,height=600,z-index=20, resizable=yes, scrollbars=yes');">

If i remove the onSubmit javascript, it just opens a new tab (again, not what I want). If i remove the target="_blank", it just opens a new tab as well.

What I really want to do is have the window.open dimensions in my onSubmit event apply to the submitted form page, not an extraneous blank page.

So I know this is a dumb question, but I haven't been able to find a precise answer to my specific issue. I have tried changing the submit button to a regular button and adding an onClick event... no dice. I am trying to submit a form to a new, custom-sized window (so not a new tab in Chrome, etc). I have gotten it so it opens the submitted form data on the new page in a new window, but the custom sized-window is also opened as a blank page.

<form action="Upload.cfm" target="_blank" enctype="multipart/form-data" method="post" onSubmit="window.open('', 'mywindow3','left=0,width=900,height=600,z-index=20, resizable=yes, scrollbars=yes');">

If i remove the onSubmit javascript, it just opens a new tab (again, not what I want). If i remove the target="_blank", it just opens a new tab as well.

What I really want to do is have the window.open dimensions in my onSubmit event apply to the submitted form page, not an extraneous blank page.

• javascript
• html
• forms

• If my post is unclear, the above code opens 2 pop-up windows (1 good, 2 bad). The custom-sized one is not the page the form submits too, unfortunately. The one the page submits to is a little smaller. – MeanDean73 Commented Mar 6, 2015 at 16:31

2 Answers 2

You can do something like this:

Set the action normally, set a custom name for the target attribute and set the button type to button, not submit (we will submit by javascript):

<form id="myform" method="post"  enctype="multipart/form-data" action="Upload.cfm" target="result">
    <input type="text" name="test" value="test">
    <button type="button" id="mybutton">Send</button>
</form>

Set a "click" event to the button and, in the callback, open the window with window.open() and set the first parameter as the form's action and the second parameter as the form's target as well as the dimensions and furthermore attributes. And then submit the form!

document.getElementById('mybutton').addEventListener('click', function(){
  window.open('Upload.cfm', 'result', 'width=300,height=300');
  document.getElementById('myform').submit();
});

I've tested this in latest Firefox and Chrome.

A (bit) simpler version and explanation than the answer above, imo:

<form action="Upload.cfm" method="POST" target="customWindow">
  <input type="text" name="test" value="test">
  <button onclick="window.open('Upload.cfm', 'customWindow', 'width=900,height=600'); $(this).closest('form').submit();">
           SUBMIT
  </button> 
</form>