Отправить форму во всплывающем окне, а затем закрыть всплывающее окно
Это казалось таким тривиальным, когда я начал с него! Моя цель такова:
- Когда пользователь нажимает кнопку, откройте форму в новом окне.
- После отправки формы закройте всплывающее окно и верните исходную страницу. Обратный порядок тоже прекрасен - то есть, я в порядке, если всплывающее окно закрыто, а затем форма отправляется.
Вот как я это делаю:
<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.