MeanDean73 MeanDean73 - 2 months ago 8
HTML Question

Submit form to new custom size window

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.

Answer

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.

Comments