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

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

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

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

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

Ответы

Ответ 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>

Ответ 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

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

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

Ответ 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.