Javascript – 在新窗口中选择元素打开URL并提交表单
更新 – 请阅读以下原始问题的更多详细信息
我有一个带有各种url的select表单元素,我想在选择时在新窗口中打开 – 要做到这一点,我在元素的onchange事件中有以下代码:
window.open(this.options[this.selectedIndex].value,'_blank');
这很好用。 但是我也想在更改这个选择元素值时提交表单 – 我尝试了各种各样的东西,但我似乎无法让它工作。
我有jquery,所以如果通过它更容易实现那么那很好。
更新 – 我刚刚意识到上面还有另一个问题,因为有些url实际上用于生成和输出pdf,而这些不起作用 – 它们打开然后立即关闭(至少在IE7中)。
更新07/05/09 – 我现在已经开启了这个问题的赏金,因为我真的需要提出一个有效的解决方案。 我最初通过显示链接而不是表单选择元素来解决问题,但这不再可行。
我需要上述原因的原因是我有大量可能需要查看/打印的文件,太多而无法合理地显示为链接列表。 我需要提交表单以记录查看/打印特定文件的事实,然后在表单上显示文件历史记录的日志 – 我很乐意实现这方面的事情,所以不需要那里的帮助,但我认为这有助于确定背景。
因此,为了澄清我的要求 – 我需要一个表单选择元素和’查看’按钮,单击它时不仅会在新窗口中启动文件下载(请注意我在这些文件是PDF时遇到的上述问题),还要提交包含select元素的表单。
你去吧
您可以使用this.form.submit()
来触发表单提交:
刚刚测试过Aron的例子,它运行正常,所以我建议你得到的错误来自你的onchange事件之外的代码。 尝试以下工作示例,看看是否得到相同的错误。
Example onchange and submit
根据您所描述的内容,您的标记可能看起来像这样:
因为浏览器传统是要添加到表单元素的对象(作为属性)输入’名称,输入中的“submit”属性会掩盖表单的固有“提交”属性或方法。 你可以通过重命名甚至是临时的输入元素来解决这个问题(假设只有一个):
form_object.elements['submit'].name = 'notsubmit'; form_object.submit();
如果有多个 – 例如,由于某种原因名为“submit”的一系列单选按钮 – 那么.elements [‘submit’]应该是一个元素集合,就像一个数组,你可以循环到做同样的事。
您知道可以为表单设置目标属性吗?
原谅可能不好的Javascript。 这些天我倾向于做更多的jQuery,所以我在vanilla Javascript上生锈了。 但是你得到了一般的想法。
虽然我不熟悉jQuery,但你应该可以做这样的事情(Prototype-style):
$('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');