Javascript - 表单选择元素在新窗口中打开 url 并提交表单
Posted
技术标签:
【中文标题】Javascript - 表单选择元素在新窗口中打开 url 并提交表单【英文标题】：Javascript - form select element open url in new window and submit form 【发布时间】：2010-10-08 13:50:06 【问题描述】：已更新 - 请阅读原始问题下方的更多详细信息
我有一个带有各种 url 的选择表单元素，我想在选择时在新窗口中打开 - 为此，我在元素的 onchange 事件中有以下代码：
window.open(this.options[this.selectedIndex].value,'_blank');
这很好用。但我也想在更改此选择元素值时提交表单 - 我尝试了各种方法，但似乎无法让它工作。
我有 jquery，所以如果通过它更容易实现，那很好。
更新 - 我刚刚意识到上面还有另一个问题，因为一些 url 实际上用于生成和输出 pdf，而这些不起作用 - 它们打开然后立即关闭（至少在 IE7 中）。
2009 年 7 月 5 日更新 - 我现在已经为这个问题开了一个赏金，因为我真的需要想出一个可行的解决方案。我最初确实通过显示链接而不是表单选择元素来解决这个问题，但这不再可行。
我需要上述内容的原因是我有大量可能需要查看/打印的文件，太多而无法合理地显示为链接列表。我需要提交表单以记录特定文件已被查看/打印的事实，然后在表单上显示文件历史记录 - 我很乐意实现这一方面，所以不需要帮助，但我认为这将有助于放置上下文。
所以，为了阐明我的要求 - 我需要一个表单选择元素和“查看”按钮，单击该按钮不仅会在新窗口中启动文件下载（请注意当这些文件是 PDF 时我遇到的上述问题），而且同时提交包含选择元素的表单。
【问题讨论】：
IE关闭可能是因为文件已下载，浏览器无法打开，比如没有安装Adobe Reader。 不幸的是，IE 问题仍然存在 - 它打开文件然后立即关闭窗口，即使我已安装并运行 Acrobat Reader 并且禁用了弹出窗口阻止程序。这个问题在这里有详细说明***.com/questions/400010/… 【参考方案1】：来吧
<script type="text/javascript">
$(function()
$("#selectElement").change(function()
if ($(this).val())
window.open($(this).val(), '_blank');
$("#formElement").submit();
);
// just to be sure that it is submitting, remove this code
$("#formElement").submit(function()
alert('submitting ... ');
);
);
</script>
<form id="formElement" method="get" action="#">
<select id="selectElement">
<option></option>
<option value="http://www.deviantnation.com/">View Site 1</option>
<option value="http://***.com/">View Site 2</option>
<option value="http://serverfault.com/">View Site 3</option>
</select>
</form>
【讨论】：
+1 - 没有理由不能在每个浏览器中完美运行。如果这不起作用，那么 BrynJ 的其他代码有问题。 ...确实如此 :) 我已经设法解决了我在 IE 关闭弹出窗口时遇到的问题。【参考方案2】：可以使用this.form.submit()触发表单提交：
<script language="javascript">
function myChangeHandler()
window.open(this.options[this.selectedIndex].value, '_blank');
this.form.submit();
</script>
<select onchange="myChangeHandler.apply(this)">
...
</select>
【讨论】：
嗨，阿伦。我已经尝试过这种语法，但出现“对象不支持此属性或方法”错误。我认为上述方法也可以，但似乎有什么东西把它扔掉了？ 很奇怪 - 我仍然得到同样的错误？这可能是什么原因造成的？ @BrynJ：有两个常见错误可能会导致这种情况。表单中有一个名称或 id 为“submit”的元素，您必须更改它才能使用表单的“submit”方法；或者您拥有的对象不是表单，并且可能是具有该 id 或名称的表单或其他元素的数组。 确实有一个名为“提交”的元素 - 感谢您的建议，将再试一次！【参考方案3】：刚刚测试了 Aron 的示例，它工作正常，所以我建议您得到的错误来自 onchange 事件之外的代码。试试下面的例子，看看你是否得到同样的错误。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Example onchange and submit </TITLE>
<script language="javascript">
function myChangeHandler()
window.open(this.options[this.selectedIndex].value, '_blank');
this.form.submit();
</script>
</HEAD>
<BODY>
<form id="myform1" action="test.html">
<select onchange="myChangeHandler.apply(this)">
<option>Please select....</option>
<option value="http://***.com">***</option>
<option value="http://twitter.com">Twitter</option>
</select>
</form>
</BODY>
</HTML>
【讨论】：
【参考方案4】：根据您的描述，您的标记可能如下所示：
<form ...>
<input name="submit" ...>
...
</form>
由于浏览器的传统是向表单元素的对象（作为属性）输入的名称添加名称，输入中的“提交”属性掩盖了表单固有的“提交”属性或方法。您可以通过重命名输入元素（即使是临时重命名）来纠正此问题（假设只有一个）：
form_object.elements['submit'].name = 'notsubmit';
form_object.submit();
如果有多个——例如，由于某种原因，一系列名为“提交”的单选按钮——那么 .elements['submit'] 应该是一个元素集合，它就像一个数组，你可以循环做同样的事情。
【讨论】：
感谢您的有用解释！【参考方案5】：您知道可以为表单设置目标属性吗？
<form target="_blank" method="post">
<select onchange="load()">
...
</select>
</form>
<script>
load()
document.forms[0].action = this.value;
document.forms[0].submit();
</script>
原谅可能不好的 Javascript。这些天我倾向于做更多的jQuery，所以我对香草Javascript生疏了。但是你大概明白了。
【讨论】：
对不起，我应该更清楚一点——表单的目标不是新的 url，我只是想在这个特定的选择元素更改后提交表单。【参考方案6】：虽然我不熟悉 jQuery，但你应该可以做这样的事情（原型风格）：
$('select-field').observe('change',function(event)
window.open(this.options[this.selectedIndex].value,'_blank');
this.form.submit();
虽然我之前在使用 Javascript 提交表单时遇到过一些奇怪的问题，所以如果这不起作用，您可以尝试在表单的提交按钮上调用 click() 或等效的 fireEvent('click')，如下所示：
$('submit-button').fireEvent('click');
【讨论】：
试过了，但我得到了同样的“对象不支持这个属性或方法”错误。以上是关于Javascript - 表单选择元素在新窗口中打开 url 并提交表单的主要内容，如果未能解决你的问题，请参考以下文章
iPad Chrome - 在新窗口/选项卡中提交表单不起作用
当用户选择“在新选项卡中打开”/“在新窗口中打开”而不是使用 html/javascript 点击时如何到达所需的页面