2

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

我有一个带有各种 url 的选择表单元素，我想在选择时在新窗口中打开 - 为此，我在元素的 onchange 事件中有以下代码：

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

这工作正常。但是我也想在更改此选择元素值时提交表单-我尝试了各种方法，但似乎无法使其正常工作。

我有 jquery，所以如果通过它更容易实现，那很好。

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

2009 年 7 月 5日更新- 我现在已经为这个问题开了一个赏金，因为我真的需要想出一个可行的解决方案。我最初确实通过显示链接而不是表单选择元素来解决这个问题，但这不再可行。

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

因此，为了阐明我的要求 - 我需要一个表单选择元素和“查看”按钮，单击该按钮不仅会在新窗口中启动文件下载（请注意当这些文件是 PDF 时我遇到的上述问题），而且还提交包含选择元素的表单。

4

6 回答 6

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>
于 2009-05-07T11:58:23.237 回答
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>
于 2009-02-19T12:07:05.430 回答
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>
于 2009-05-07T12:12:43.093 回答
1

根据您的描述，您的标记可能看起来像这样：

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

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

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

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

于 2009-05-07T12:48:26.127 回答
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，所以我对香草Javascript生疏了。但你得到了一般的想法。

于 2009-02-19T12:07:48.347 回答
0

虽然我不熟悉 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');
于 2009-02-19T12:08:00.920 回答