2

更新- 元の質問の下の詳細をお読みください

選択したときに新しいウィンドウで開きたい、さまざまな URL を持つ選択フォーム要素があります。これを行うには、要素の onchange イベントに次のコードがあります。

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

これはうまくいきます。しかし、このselect要素の値を変更するときにフォームを送信したい-さまざまなことを試しましたが、うまくいかないようです。

私はjqueryを持っているので、それを介して達成する方が簡単であれば、それで問題ありません。

更新 - 上記には別の問題があることに気付きました.一部の URL は実際に PDF の生成と出力に使用されており、これらは機能しません - それらは開いてすぐに閉じます (少なくとも IE7 では)。

UPDATE 07/05/09 - 実際に機能する解決策を考え出す必要があるため、この質問に対して報奨金を用意しました。フォーム選択要素の代わりにリンクを表示することで問題を回避しましたが、これはもはや実現できません。

上記が必要な理由は、表示/印刷する必要がある可能性のあるファイルが多数あり、リンクのリストとして合理的に表示するには多すぎるためです。特定のファイルが表示/印刷されたという事実を記録するためにフォームを送信し、フォームにファイル履歴のログを表示する必要があります。しかし、コンテキストを配置するのに役立つと思いました。

したがって、私の要件を明確にするために、クリックすると新しいウィンドウでファイルのダウンロードが開始されるだけでなく (これらのファイルが PDF の場合に直面した上記の問題に注意してください)、フォーム選択要素と [表示] ボタンが必要です。 select要素を含むフォーム。

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>

ブラウザーの伝統では、フォーム要素のオブジェクトに (プロパティとして) 入力の名前を追加するため、入力の「送信」プロパティは、フォーム固有の「送信」プロパティまたはメソッドをマスクします。入力要素の名前を一時的であっても変更することで、これを修正できます (1 つしかないと仮定します)。

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

複数ある場合 (たとえば、何らかの理由で "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 に答える