web-dev-qa-db-ja.com

ポップアップでフォームを送信し、ポップアップを閉じます

私はそれを始めたとき、これはとても些細なようでした！私の目的はこれです：

  • ユーザーがボタンをクリックすると、新しいウィンドウでフォームが開きます。
  • フォームが送信されたら、ポップアップを閉じて元のページに戻ります。逆の順序でも結構です-つまり、ポップアップを閉じてからフォームを送信しても大丈夫です。

これは私がこれをやっている方法です：

<form action="/system/wpacert" method="post" enctype="multipart/form-data" onsubmit="return closeSelf()" name="certform">
                <div>Certificate 1: <input type="file" name="cert1"/></div>
                <div>Certificate 2: <input type="file" name="cert2"/></div>
                <div>Certificate 3: <input type="file" name="cert3"/></div>

                <div><input type="submit" value="Upload"/></div>
            </form>

javascriptは次のようになります。

<script type="text/javascript">
function closeSelf(){
    self.close();
    return true;
}
</script>

これはIE8とChromeで正常に動作するようです。しかし、Firefoxはフォームの送信を拒否します。ポップアップを閉じるだけです。何が間違っているのでしょうか？

編集：

ポップアップを開くコードを投稿するのを忘れていました。ここにあります：

<div><input type="submit" value="Upload Certificates" onclick="popupUploadForm()"/>

対応するjavascript：

function popupUploadForm(){
        var newWindow = window.open('/cert.html', 'name', 'height=500,width=600');
    }
javascripthtmlpopup
20
curioustechizen

IEおよびFFも動作するように、マシンでコードを実行しました。

function closeSelf(){
    // do something

    if(condition satisfied){
       alert("conditions satisfied, submiting the form.");
       document.forms['certform'].submit();
       window.close();
    }else{
       alert("conditions not satisfied, returning to form");    
    }
}


<form action="/system/wpacert" method="post" enctype="multipart/form-data" name="certform">
       <div>Certificate 1: <input type="file" name="cert1"/></div>
       <div>Certificate 2: <input type="file" name="cert2"/></div>
       <div>Certificate 3: <input type="file" name="cert3"/></div>

       // change the submit button to normal button
       <div><input type="button" value="Upload"  onclick="closeSelf();"/></div>
</form>
11
dku.rajkumar

これは古い質問であることは知っていますが、同様の問題を抱えていたときに偶然見つけました。あなたが要求した結果をどのように達成し終えたかを共有したかったので、将来の人々は自分の状況に最適なものを選ぶことができます。

まず、フォームでonsubmitイベントを利用し、thisを関数に渡して、この特定のフォームを簡単に処理できるようにします。

<form action="/system/wpacert" onsubmit="return closeSelf(this);" method="post" enctype="multipart/form-data"  name="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>

    <div><input type="submit" value="Upload"/></div>
</form>

この関数では、フォームデータを送信してから、ウィンドウを閉じます。これにより、データを送信できるようになり、完了すると、ウィンドウが閉じて元のウィンドウに戻ります。

<script type="text/javascript">
  function closeSelf (f) {
     f.submit();
     window.close();
  }
</script>

これが誰かを助けることを願っています。楽しい！

オプション2：このオプションを使用すると、AJAX経由で送信できます。成功すると、ウィンドウが閉じます。これにより、データが送信される前にウィンドウが閉じることを防ぎます。 http://jquery.malsup.com/form/ への謝辞

まず、フォーム/送信ボタンからonsubmit/onclickイベントを削除します。 IDをフォームに配置して、AJAXが検索できるようにします。

<form action="/system/wpacert" method="post" enctype="multipart/form-data"  id="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>

    <div><input type="submit" value="Upload"/></div>
</form>

次に、このスクリプトを一番下にスローします。プラグインを参照することを忘れないでください。フォームの送信が成功すると、ウィンドウが閉じます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

    <script>
       $(document).ready(function () {
          $('#certform').ajaxForm(function () {
          window.close();
          });
       });
    </script>
5
Fata1Err0r

これが私がこれをやった方法です：

_        <div id="divform">
            <form action="/system/wpacert" method="post" enctype="multipart/form-data" name="certform">
                <div>Certificate 1: <input type="file" name="cert1"/></div>
                <div>Certificate 2: <input type="file" name="cert2"/></div>

                <div><input type="button" value="Upload" onclick="closeSelf();"/></div>
            </form>
        </div>
        <div  id="closelink" style="display:none">
            <a href="javascript:window.close()">Click Here to Close this Page</a>
        </div>

function closeSelf(){
    document.forms['certform'].submit();
    hide(document.getElementById('divform'));
    unHide(document.getElementById('closelink'));

}
_

hide()およびunhide()は、それぞれ_style.display_を_'none'_および_'block'_に設定します。

正確には私が念頭に置いていたものではありませんが、これは当分の間やらなければなりません。 IE、Safari、FF、Chromeで動作します。

4
curioustechizen

このようにしてみてください

covertPostSub("/xyz/test.jsp","?param1=param1&param2=param2","_self","true");
covertPostSub("/xyz/test.jsp","?param1=param1&param2=param2","_blank","true");

var convPop = null;
function covertPostSub(action,paramsTosend,targetIframe,isWindow){
    var Popup = null;
    var form = document.createElement("form");
    form.setAttribute("method", "POST");
    form.setAttribute("id","TheForm");
    form.setAttribute("action", action);
    form.setAttribute("target", targetIframe);
    var params = paramsTosend;
    params = params.substring(1, params.length);
    params = params.split("&");
    for(var key=0; key<params.length; key++) {
        var sa = params[key];
        sa = sa.split("=");
        var xs = (sa[1]);

        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", sa[0]);
            hiddenField.setAttribute("value",xs);

            form.appendChild(hiddenField);
         }
    }
    document.body.appendChild(form);
    form.style.display = "none";
    if(isWindow){
        window.open('', "formpopup","width=900,height=590,toolbar=no,scrollbars=yes,resizable=no,location=0,directories=0,status=1,menubar=0,left=60,top=60");
        form.target = 'formpopup';
        form.submit();
    }else{
        form.submit();
    }

}
0
Bhaskara Arani