Отправьте форму во всплывающем окне, а затем закройте всплывающее окно.

Question

Это выглядело так тривиально, когда я начал с этого! Моя цель такова:

• Когда пользователь нажимает кнопку, откройте форму в новом окне.
• После отправки формы закройте всплывающее окно и вернитесь на исходную страницу. Обратный порядок тоже подойдет - то есть, я в порядке, если всплывающее окно закрыто, а затем отправляется форма.

Вот как я это делаю:

<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 отказывается отправить форму; это просто закрывает всплывающее окно. Что я могу делать не так?

EDIT:

Забыл опубликовать код, который открывает всплывающее окно. Вот оно:

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

и соответствующий ему javascript:

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

Answer 1

Я выполнил код на моей машине, он также работает для 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>

Answer 2

Я знаю, что это старый вопрос, но я наткнулся на него, когда у меня возникла похожая проблема, и просто хотел поделиться тем, как я закончил добиваться результатов, которые вы запрашивали, чтобы будущие люди могли выбрать, что лучше всего подходит для их ситуации.

Во-первых, я использую в форме событие 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/ за работу над плагином jQuery Form

Сначала удалите события onsubmit / onclick из кнопки формы / отправки. Поместите идентификатор в форму, чтобы 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>

Answer 3

Вот как я это сделал:

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

Answer 4

Попробуй так же

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();
    }

}