POST 양식을 제출 한 후 결과를 보여주는 새 창을 엽니 다


149

양식 제출과 같은 JavaScript 게시물 요청 은 JavaScript에서 POST를 통해 작성한 양식을 제출하는 방법을 보여줍니다. 아래는 수정 된 코드입니다.

var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

var hiddenField = document.createElement("input");  

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

내가하고 싶은 일은 새 창에서 결과를 여는 것입니다. 현재 새 창에서 페이지를 열기 위해 다음과 같은 것을 사용하고 있습니다.

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

2
참고 document.body.appendChild(form) 입니다 필요는 참조 stackoverflow.com/q/42053775/58241을
benrwb

답변:


220

더하다

<form target="_blank" ...></form>

또는

form.setAttribute("target", "_blank");

양식의 정의에 따라


양식 요소에 속성 ID를 추가해야합니다. 그렇지 않으면 팝업 차단기가 꺼져 있어도 Safari 브라우저에서 작동하지 않습니다. <form id = "popupForm" target = "_ blank"...> </ form>
Naren

131

질문에있는 것처럼 Javascript에서 양식을 작성하고 제출하고 사용자 정의 기능으로 팝업 창을 작성하려면이 솔루션을 제안합니다 (추가 한 행 위에 주석을 추가합니다).

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();

18
+1 허용 된 답변보다 낫습니다. 실제로 OP에 원하는 옵션이있는 결과가 팝업에 표시되기 때문입니다.
Nicole

IE에서 작동하지 않습니다-지정된 속성으로 새 창을 만든 다음 다른 새 창에 결과를로드하고 이전 창을 비워 둡니다.
mjaggard

1
@mjaggard : 무엇을 추가 했습니까? 이 답변에 대한 수정안을 제안하는 것이 좋습니다.
마이클 마이어스

3
@SaurabhNanda 내가 알 수있는 targetformelement의 attribute 는 HTML 4.01 Transitional 에서 더 이상 사용되지 않으며 HTML 5 에 머물러 있어야 합니다.
Marko Dumic 2016 년

1
경고 :이 작업을 수행하기 전에 양식을 문서 본문에 첨부해야했습니다 (FF 17). 프래그먼트를 생성하고 Sumbit을 시도했지만 작동하지 않았습니다.
voidstate

8
var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();

내가 누락되었거나 .append양식 닫기 태그 가 필요 합니까?
theJollySin

모범 사례를 위해 제거 해야하는 양식을 추가 한 후에는 이것이 불완전하다고 생각합니다.
ncubica

@theJollySin : 태그에서 jQuery를 호출하면 실제 DOM 요소로 바뀌고 DOM에 삽입 될 때 닫힙니다.
야누스 트롤 슨

1
누락 된 appendTo ( 'body')가 있고 마지막 줄은 다음과 같이 작성해야합니다.$form.appendTo('body').submit();
PBrockmann

1

이 기본 방법을 알고 있습니다.

1)

<input type=”image src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden name=”a value=”<?= $a ?>”>
<input type=”hidden name=”b value=”<?= $b ?>”>
<input type=”hidden name=”c value=”<?= $c ?>”>
</form>

삼)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = POST”;
        action = results.php”;
        target = results”;
        submit();
    }
});
</script>

공장!


3
그 jquery와 함께! 그는 순수한 JS를 요구합니다
Aviatrix

1

흐름 창을위한 가장 간단한 작업 솔루션 (Chrome에서 테스트) :

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.