2012-04-24 8 views
1

投稿する前に検証する必要があるフォームがあります。ポップアップウィンドウにPOSTした後、フォームをリセットする必要があります。ターゲットajaxポップアップウィンドウに投稿する

私はtarget="newWindowName"onsubmit="window.open('','newWindowName','')"フォームの属性が機能していることを知っていますが、これは送信後に何もできません。

投稿後の機能を指定するのに$('form').ajaxSubmit()を使用できますが、新しいウィンドウを開くことはできません。

どうすればこれらのことを同時に行うことができますか?

これは私のフォームである:これは私のjavascriptのある

<form id="myForm" target="newWindow" autocomplete="on" action="/myUrl" method="post"> 

$('#myForm').submit(function(e) { 
    e.preventDefault(); 
    if ($('#myForm').valid()) { 
     var options = { 
      target: '', 
      beforeSubmit: function() { 
       this.target = "newWindow"; 
       window.open("", "newWindow", "width=500,height=450"); 
      }, 
      success: function() { 
       hideForm(); 
       $('#myForm').resetForm(); 
      } 
     }; 

     $(this).ajaxSubmit(options); 
    } 
    return false; 
} 

答えて

2

をここに私はそれがはるかにエレガントだったと一緒に行くことになったソリューションです。

<form id="myForm" target="newWindow" autocomplete="on" action="/myUrl" method="post"> 

そしてJS:

$('#myForm').submit(function(e) { 
    if ($(this).valid()) { 
     var f = this; 
     window.open("",$(this).attr("target"),"width=500,height=500"); 
     setTimeout(function() { // delay resetting the form until after submit 
      hideForm(); 
      f.reset(); 
     }, 0); 
     return true; 
    } 
    else { 
     e.preventDefault(); // only prevent default if the form is not valid 
    } 
    return false; 
}); 

この方法でフォームが有効であれば、新しいウィンドウがのみ表示されます。

1

あなたのformタグでtarget属性を使用して、正しい考えを持っています。それは自動的に "newWindow"という名前のウィンドウにフォームを送信します。

(常に、新しいウィンドウに提出target="_blank"を使用しています。TO)のトラブルは、あなたがその新しいウィンドウに提出されてからフォームを防止して、AJAX提出を行うためにはJavaScriptを使用しています。あなたは、余分なコードを削除する場合は、あなたが望む結果を得るでしょう:

$('#myForm').submit(function(e) { 
    if ($(this).valid()) { 
     var f = this; 
     setTimeout(function() { // delay resetting the form until after submit 
      hideForm(); 
      f.reset(); 
     }, 0); 
    } 
    else { 
     e.preventDefault(); // only prevent default if the form is not valid 
    } 
}); 

はデモの作業:http://jsfiddle.net/2x6wL/

+0

それはうまくいきました、ありがとうございます! – Kay