양식 제출에서 새 창을 여는 방법

제출 양식이 있는데 사용자가 양식을 제출할 때 새 창을 열어 분석에서 추적 할 수 있기를 원합니다.

사용중인 코드는 다음과 같습니다.

<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
    <label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    <br/>
    <br/>
    <label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <br/>
    <br/>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>

Javascript가 필요하지 않으므로 target="_blank"양식 태그에 속성 을 추가하기 만하면 됩니다.

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>

팝업 창을 사용하여 데이터베이스 데이터의 인쇄물을 표시하는 웹 기반 데이터베이스 응용 프로그램에서 이는 Chrome 48에서 테스트 한 우리의 요구에 충분히 부합했습니다.

<form method="post" 
      target="print_popup" 
      action="/myFormProcessorInNewWindow.aspx"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

트릭은 태그 의 target속성을 핸들러 <form>의 window.open호출에서 두 번째 인수와 일치시키는 것입니다 onsubmit.

onclick해당 액션을 첨부하기 가장 좋은 이벤트가 아닐 수도 있습니다. 누구나 양식의 아무 곳이나 클릭하면 창이 열립니다.

<form action="..." ...
    onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">

폼의 target속성 과 유사한 효과를 얻으려면 또는 formtarget속성을 사용할 수도 있습니다 .input[type="submit]"button[type="submit"]

에서 MDN :

...이 속성은 양식을 제출 한 후 수신 된 응답을 표시 할 위치를 나타내는 이름 또는 키워드입니다. 브라우징 컨텍스트 (예 : 탭, 창 또는 인라인 프레임)의 이름 또는 키워드입니다. 이 속성이 지정되면 요소 양식 소유자의 대상 속성을 대체합니다. 다음 키워드에는 특별한 의미가 있습니다.

• _self : 현재와 동일한 브라우징 컨텍스트에 응답을로드하십시오. 속성이 지정되지 않은 경우이 값이 기본값입니다.
• _blank : 이름이없는 새로운 브라우징 컨텍스트에 응답을로드합니다.
• _parent : 현재의 상위 브라우징 컨텍스트에 응답을로드하십시오. 부모가 없으면이 옵션은 _self와 같은 방식으로 동작합니다.
• _top : 최상위 브라우징 컨텍스트 (즉, 현재 컨텍스트의 조상이며 부모가없는 브라우징 컨텍스트)에 응답을로드합니다. 부모가 없으면이 옵션은 _self와 같은 방식으로 동작합니다.

제공 한 코드를 수정해야합니다. 양식 태그에서 onClick 속성 값을 큰 따옴표로 묶어야합니다.

"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"

또한 첫 번째 매개 변수 window.open도 따옴표로 묶어야합니다.

나는 일반적으로 작은 jQuery 스 니펫을 전체적으로 사용하여 새 탭 / 창에서 외부 링크를 엽니 다. 내 사이트의 양식에 대한 선택기를 추가했으며 지금까지 잘 작동합니다.

// URL target
    $('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');

이 jquery가 잘 작동한다고 생각하면 아래 코드를 확인하십시오.

그러면 작업 URL을 다시 열거 나 새 링크를 제출하려는 경우 제출 작업이 작동하고 새 탭에서 링크가 열립니다.

jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})

이 코드는 완벽하게 작동합니다 ..

window.open 모든 브라우저에서 작동하지는 않지만 Google에서는 올바른 대화 상자 유형을 감지하는 방법을 찾을 수 있습니다.

또한 클릭시 호출을 입력 버튼으로 이동하여 사용자가 제출할 때만 실행되도록합니다.

나는 이것에 대한 해결책을 찾았다. 이 페이지가 오늘 도움이되었으므로 여기에도 다시 게시하고 있습니다.

/** This is the script that will redraw current screen and submit to paypal. */
echo '<script>'."\n" ;
echo 'function serverNotifySelected()'."\n" ;
echo '{'."\n" ;
echo '    window.open(\'\', \'PayPalPayment\');'."\n" ;
echo '    document.forms[\'paypal_form\'].submit();'."\n" ;
echo '    document.forms[\'server_responder\'].submit();'."\n" ;
echo '}'."\n" ;
echo '</script>'."\n" ;

/** This form will be opened in a new window called PayPalPayment. */
echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" name="paypal_form" method="post" target="PayPalPayment">'."\n" ;
echo '<input type="hidden" name="cmd" value="_s-xclick">'."\n" ;
echo '<input type="hidden" name="custom" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="hosted_button_id" value="'.$single_product->hosted_button_id.'">'."\n" ;
echo '<table>'."\n" ;
echo '    <tr>'."\n";
echo '        <td><input type="hidden" name="'.$single_product->hide_name_a.'" value="'.$single_product->hide_value_a.'">Local</td>'."\n" ;
echo '    </tr>'."\n" ;
echo '    <tr>'."\n" ;
echo '        <td>'."\n" ;
echo '        <input type="hidden" name="'.$single_product->hide_name_b.'" value="'.$single_product->hide_value_b.'" />'.$single_product->short_desc.' $'.$adj_price.' USD'."\n" ;
                // <select name="os0">
                //     <option value="1 Day">1 Day $1.55 USD</option>
                //     <option value="All Day">All Day $7.50 USD</option>
                //     <option value="3 Day">3 Day $23.00 USD</option>
                //     <option value="31 Day">31 Day $107.00 USD</option>
                // </select>
echo '        </td>'."\n" ;
echo '    </tr>'."\n" ;
echo '</table>'."\n" ;
echo '<input type="hidden" name="currency_code" value="USD">'."\n" ;
echo '</form>'."\n" ;

/** This form will redraw the current page for approval. */
echo '<form action="ProductApprove.php" name="server_responder" method="post" target="_top">'."\n" ;
echo '<input type="hidden" name="trans" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="prod_id" value="'.$this->product_id.'">'."\n" ;
echo '</form>'."\n" ;

/** No form here just an input and a button.  onClick will handle all the forms */
echo '<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" alt="PayPal - The safer, easier way to pay online!" onclick="serverNotifySelected()">'."\n" ;
echo '<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'."\n" ;

위의 코드는 하나의 버튼에 대한 코드입니다. 버튼을 누르면 현재 화면이 구매에서 사전 승인으로 다시 그려집니다. 동시에 새 창을 열고 새 창을 PayPal로 넘깁니다.