CODEWITHSUNDEEP
javascripthtmlforms
MeanDean73
MeanDean73

Reputation: 155

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.

Upvotes: 4

Views: 7639

Answers (2)

Govind Rai
Govind Rai

Reputation: 15828

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>

Upvotes: 2

Lucas
Lucas

Reputation: 339

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.

Upvotes: 4

Related Questions