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

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

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

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

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