代码之家 › 专栏 › 技术社区 › BrynJ

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

form-submit select forms jquery javascript

BrynJ · 技术社区 · 16 年前

更新的 -请阅读以下原始问题的详细信息

我有一个带有各种URL的select form元素,选中后我想在新窗口中打开它-为此,我在元素的onchange事件中有以下代码:

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

这个很好用。但是我还想在更改这个select元素值时提交表单-我尝试过各种方法,但似乎无法使其正常工作。

我有jquery,所以如果通过它更容易实现,那就好了。

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

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

我之所以需要上述内容,是因为我有大量的文件可能需要查看/打印,太多文件无法合理地显示为链接列表。我需要提交表单以记录特定文件已被查看/打印的事实,然后在表单上显示文件历史记录的日志-我对实现这一方面感到满意,因此不需要在那里提供帮助,但我认为这将有助于放置上下文。

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

6 回复 | 直到 14 年前

Chad Grant 16 年前

这里你去

<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>

Aron Rotteveel 16 年前

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

Gais 16 年前

刚刚测试了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>

Anonymous 16 年前

根据您所描述的内容,您的标记可能如下所示:

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

因为浏览器传统是添加到表单元素的对象(作为属性)输入的名称中,所以输入中的“提交”属性掩盖了表单固有的“提交”属性或方法。您可以通过重命名输入元素(即使是临时的)来更正此问题(假设只有一个输入元素):

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

如果有多个——例如,出于某种原因,一系列名为“submit”的单选按钮——那么.元素[“submit”]应该是一个元素集合,就像一个数组,您可以循环执行相同的操作。

cletus 16 年前

你知道你可以为表单设置一个目标属性吗?

<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已经厌倦了。但你明白了。

Luke 16 年前

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