将表单提交到新的自定义尺寸窗口答案

【问题标题】：Submit form to new custom size window将表单提交到新的自定义尺寸窗口
【发布时间】：2016-09-11 09:58:53
【问题描述】：

所以我知道这是一个愚蠢的问题，但我无法为我的具体问题找到准确的答案。我尝试将提交按钮更改为常规按钮并添加onClick 事件......没有骰子。我正在尝试将表单提交到一个新的、自定义大小的窗口（所以不是 Chrome 中的新标签等）。我已经得到它，所以它在新窗口中的新页面上打开提交的表单数据，但自定义大小的窗口也作为空白页面打开。

<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');">

如果我删除 onSubmit javascript，它只会打开一个新标签（同样，不是我想要的）。如果我删除target="_blank"，它也会打开一个新标签。

我真正想做的是让我的 onSubmit 事件中的 window.open 维度应用于提交的表单页面，而不是无关的空白页面。

【问题讨论】：

如果我的帖子不清楚，上面的代码会打开 2 个弹窗（1 个好，2 个坏）。不幸的是，自定义大小的页面也不是表单提交的页面。页面提交到的那个要小一些。

标签： javascript html forms

【解决方案1】：

你可以这样做：

正常设置动作，为target属性设置自定义名称并将button类型设置为button，而不是submit（我们将通过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>

为button设置一个“点击”事件，并在回调中使用window.open()打开窗口，并将第一个参数设置为表单的动作，第二个参数设置为表单的目标 以及尺寸和其他属性。然后提交表单！

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

我已经在最新的 Firefox 和 Chrome 中对此进行了测试。

【讨论】：

【解决方案2】：

比上面的答案更简单的版本和解释，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>

【讨论】：