it-swarm.com.de

Senden Sie ein Formular in einem Popup und schließen Sie das Popup

Das schien mir so trivial, als ich damit anfing! Mein Ziel ist folgendes:

  • Wenn der Benutzer auf eine Schaltfläche klickt, wird ein Formular in einem neuen Fenster geöffnet.
  • Schließen Sie nach dem Absenden des Formulars das Popup und kehren Sie zur ursprünglichen Seite zurück. Die umgekehrte Reihenfolge ist auch in Ordnung - d. H., Ich bin in Ordnung, wenn das Popup geschlossen ist und das Formular dann gesendet wird.

So mache ich das:

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

und das Javascript sieht so aus:

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

Dies scheint in IE8 und Chrome gut zu funktionieren. Firefox lehnt es jedoch ab, das Formular abzusenden. es schließt nur das Popup. Was könnte ich falsch machen?

BEARBEITEN:

Hatte vergessen den Code zu posten der das Popup öffnet. Hier ist es:

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

Und das entsprechende Javascript:

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

Ich habe den Code in meinem Computer ausgeführt, der für IE und FF auch funktioniert.

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

Ich weiß, dass dies eine alte Frage ist, aber ich bin darauf gestoßen, als ich ein ähnliches Problem hatte, und wollte nur mitteilen, wie ich zu den von Ihnen gewünschten Ergebnissen gekommen bin, damit zukünftige Leute herausfinden können, was für ihre Situation am besten funktioniert.

Zuerst benutze ich das Ereignis onsubmit im Formular und übergebe this an die Funktion, um den Umgang mit diesem bestimmten Formular zu erleichtern.

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

In unserer Funktion senden wir die Formulardaten und schließen dann das Fenster. Auf diese Weise können die Daten gesendet werden. Sobald dies abgeschlossen ist, wird das Fenster geschlossen und Sie kehren zum ursprünglichen Fenster zurück.

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

Hoffe das hilft jemandem aus. Genießen!


Option 2: Mit dieser Option können Sie über AJAX übermitteln. Wenn dies erfolgreich ist, wird das Fenster geschlossen. Dadurch wird verhindert, dass Fenster geschlossen werden, bevor die Daten gesendet werden. Danksagung an http://jquery.malsup.com/form/ für die Arbeit am jQuery Form Plugin

Entfernen Sie zuerst Ihre onsubmit/onclick-Ereignisse von der form/submit-Schaltfläche. Fügen Sie eine ID in das Formular ein, damit AJAX es finden kann.

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

Zweitens möchten Sie dieses Skript ganz unten platzieren. Vergessen Sie nicht, auf das Plugin zu verweisen. Wenn die Formularübertragung erfolgreich ist, wird das Fenster geschlossen.

<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

So bin ich dazu gekommen:

        <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'));

}

Wobei hide() und unhide() den style.display Auf 'none' Bzw. 'block' Setzen.

Nicht genau das, was ich mir vorgestellt habe, aber das muss vorerst sein. Funktioniert auf IE, Safari, FF und Chrome.

4
curioustechizen

Versuchen Sie es auch so

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