Javascript - 在新窗口中选择元素打开URL并提交表单

时间:2009-02-19 12:00:47

标签: javascript jquery forms select form-submit

更新 - 请在原始问题下方阅读更多详细信息

我有一个带有各种网址的select表单元素,我想在选中时在新窗口中打开 - 要做到这一点,我在元素的onchange事件中有以下代码:

window.open(this.options[this.selectedIndex].value,'_blank');

这很好用。但是我也想在更改这个选择元素值时提交表单 - 我尝试了各种各样的东西,但我似乎无法让它工作。

我有jquery,所以如果通过它更容易实现,那就没关系。

更新 - 我刚刚意识到上面还有另外一个问题,因为有些网址实际上用于生成和输出pdf,而这些不起作用 - 它们打开然后立即关闭(至少在IE7中。

更新07/05/09 - 我现在已经开启了这个问题的赏金,因为我真的需要提出一个有效的解决方案。我最初通过显示链接而不是表单选择元素来解决问题,但这不再可行。

我需要上述原因的原因是我有大量可能需要查看/打印的文件,太多而无法合理地显示为链接列表。我需要提交表单以记录查看/打印特定文件的事实,然后在表单上显示文件历史记录的日志 - 我很擅长实现这方面的事情,所以不需要那里的帮助,但我认为放置背景会有所帮助。

因此,为了澄清我的要求 - 我需要一个表单选择元素和“查看”按钮,单击它时不仅会在新窗口中启动文件下载(请注意我在这些文件是PDF时遇到的上述问题),但还提交包含select元素的表单。

6 个答案:

答案 0 :(得分:9)

这里你去了

<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://stackoverflow.com/">View Site 2</option>
        <option value="http://serverfault.com/">View Site 3</option>
    </select>
</form>

答案 1 :(得分:3)

您可以使用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>

答案 2 :(得分:2)

刚刚测试了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://stackoverflow.com">Stackoverflow</option>
    <option value="http://twitter.com">Twitter</option>
    </select>
  </form>
 </BODY>
</HTML>

答案 3 :(得分:1)

根据您所描述的内容,您的标记可能看起来像这样:

<form ...>
  <input name="submit" ...>
  ...
</form>

因为浏览器传统是要添加到表单元素的对象(作为属性)输入'名称,所以输入中的“submit”属性会掩盖表单的固有“提交”属性或方法。你可以通过重命名输入元素(假设只有一个)来纠正这个问题:

form_object.elements['submit'].name = 'notsubmit';
form_object.submit();

如果有多个 - 例如,由于某种原因名为“submit”的一系列单选按钮 - 那么.elements ['submit']应该是一个元素集合,就像一个数组,你可以循环来做同样的事情。

答案 4 :(得分:0)

您知道可以为表单设置目标属性吗?

<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,所以我在vanilla Javascript上生锈了。但是你得到了一般的想法。

答案 5 :(得分:0)

虽然我不熟悉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');