web-dev-qa-db-fra.com

Soumettez un formulaire dans une fenêtre contextuelle, puis fermez la fenêtre contextuelle

Cela semblait si trivial quand j'ai commencé avec ça! Mon objectif est le suivant:

  • Lorsque l'utilisateur clique sur un bouton, ouvrez un formulaire dans une nouvelle fenêtre.
  • Une fois le formulaire envoyé, fermez la fenêtre contextuelle et revenez à la page d'origine. L'ordre inverse est également correct - c'est-à-dire que je suis d'accord si la fenêtre contextuelle est fermée et que le formulaire est envoyé.

Voici comment je fais ça:

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

et le Javascript ressemble à ceci:

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

Cela semble bien fonctionner sur IE8 et Chrome; mais Firefox refuse de soumettre le formulaire; il ferme simplement le popup. Que pourrais-je faire de mal?

MODIFIER:

J'avais oublié de poster le code ouvre la popup. C'est ici:

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

Et le javascript correspondant:

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

J'ai exécuté le code dans ma machine, cela fonctionne pour IE et FF également.

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

Je sais que c'est une vieille question, mais je suis tombée dessus quand j'ai eu un problème similaire, et je voulais juste partager comment j'ai réussi à obtenir les résultats que vous avez demandés afin que les futures personnes puissent choisir ce qui fonctionne le mieux pour leur situation.

Tout d'abord, j'utilise l'événement onsubmit dans le formulaire et passe this à la fonction pour faciliter le traitement de ce formulaire particulier.

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

Dans notre fonction, nous soumettrons les données du formulaire, puis nous fermerons la fenêtre. Cela lui permettra de soumettre les données, et une fois cela fait, cela fermera la fenêtre et vous ramènera à votre fenêtre d'origine.

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

J'espère que cela aide quelqu'un. Prendre plaisir!

Option 2: Cette option vous permettra de soumettre via AJAX, et si elle réussit, elle fermera la fenêtre. Cela empêche la fermeture des fenêtres avant la soumission des données. Crédits à http://jquery.malsup.com/form/ pour leur travail sur le plugin jQuery Form

Tout d'abord, supprimez vos événements onsubmit/onclick du bouton formulaire/soumettre. Placez un ID sur le formulaire pour que AJAX puisse le trouver.

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

Deuxièmement, vous voudrez jeter ce script en bas, n'oubliez pas de référencer le plugin. Si la soumission du formulaire réussit, la fenêtre se ferme.

<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

Voici comment j'ai fini par le faire:

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

}

Où hide() et unhide() définissez respectivement style.display Sur 'none' Et 'block'.

Pas exactement ce que j'avais en tête, mais cela devra être fait pour le moment. Fonctionne sur IE, Safari, FF et Chrome.

4
curioustechizen

Essayez comme ça aussi

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