JavaScript- 새 창에서 URL을 열고 양식을 제출하는 요소 열기

StackOverflow https://stackoverflow.com/questions/564980

문제

업데이트되었습니다 - 원본 질문 아래에서 자세한 내용을 읽으십시오

다양한 URL이있는 선택된 폼 요소가 있습니다. 선택할 때 새 창에서 열려고합니다.

window.open(this.options[this.selectedIndex].value,'_blank');

이것은 잘 작동합니다. 그러나이 선택 요소 값을 변경할 때 양식을 제출하고 싶습니다. 여러 가지 시도를 시도했지만 작동하게 할 수는 없습니다.

나는 jQuery를 가지고 있으므로 그것을 통해 달성하기가 더 쉽다면 괜찮습니다.

업데이트 - 일부 URL이 실제로 PDF를 생성하고 출력하는 데 사용되며 작동하지 않기 때문에 위의 또 다른 문제가 있음을 깨달았습니다. 이는 작동하지 않습니다.

업데이트 07/05/09 - 이제 작업 솔루션을 제시해야하므로 이제이 질문에 대한 현상금을 열었습니다. 원래 양식 선택 요소 대신 링크를 표시하여 문제를 해결했지만 더 이상 실현 가능하지 않습니다.

위의 이유는보기 / 인쇄해야 할 파일이 많기 때문에 링크 목록으로 합리적으로 표시하기에는 너무 많기 때문입니다. 특정 파일이보고 / 인쇄되었다는 사실을 기록하려면 양식을 제출 한 다음 파일 기록의 로그를 양식에 표시합니다.이 측면을 달성하는 데 편안하므로 도움이 필요하지 않습니다. 그러나 나는 그것이 맥락을 배치하는 데 도움이 될 것이라고 생각했다.

따라서 내 요구 사항을 명확히하기 위해 - 클릭 할 때 새 창에서 파일 다운로드를 시작할 수있는 양식 선택 요소와 '보기'버튼이 필요합니다 (이 파일이 PDF 일 때 직면 한 위의 문제에 주목합니다). 선택 요소가 포함 된 양식.

도움이 되었습니까?

해결책

여기 간다

<script type="text/javascript">
    $(function() {
        $("#selectElement").change(function() {
            if ($(this).val()) {
                window.open($(this).val(), '_blank');
                $("#formElement").submit();
            }
        });

        // just to be sure that it is submitting, remove this code
        $("#formElement").submit(function() {
            alert('submitting ... ');
        });
    });
</script>

<form id="formElement" method="get" action="#">
    <select id="selectElement">
        <option></option>
        <option value="http://www.deviantnation.com/">View Site 1</option>
        <option value="http://stackoverflow.com/">View Site 2</option>
        <option value="http://serverfault.com/">View Site 3</option>
    </select>
</form>

다른 팁

당신이 사용할 수있는 this.form.submit() 양식을 트리거하려면 제출 :

<script language="javascript">
    function myChangeHandler() {
        window.open(this.options[this.selectedIndex].value, '_blank');
        this.form.submit();
}
</script>

<select onchange="myChangeHandler.apply(this)">
    ...
</select>

방금 Aron의 예제를 테스트하면 잘 작동하므로 Onchange 이벤트 이외의 코드에서 얻은 오류가 제안됩니다. 아래 작업 예제를 시도하고 동일한 오류가 발생하는지 확인하십시오.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Example onchange and submit </TITLE>

  <script language="javascript">    
   function myChangeHandler() 
   {
    window.open(this.options[this.selectedIndex].value, '_blank');
    this.form.submit();
   }
  </script>
 </HEAD>

 <BODY>
 <form id="myform1" action="test.html">
  <select onchange="myChangeHandler.apply(this)">
    <option>Please select....</option>
    <option value="http://stackoverflow.com">Stackoverflow</option>
    <option value="http://twitter.com">Twitter</option>
    </select>
  </form>
 </BODY>
</HTML>

당신이 묘사 한 내용을 기반으로, 당신의 마크 업은 아마도 다음과 같이 보일 것입니다.

<form ...>
  <input name="submit" ...>
  ...
</form>

브라우저 전통은 폼 요소의 객체 (속성) 입력 이름에 추가하는 것이기 때문에 입력에서 "제출"속성은 양식의 고유 "제출"속성 또는 메소드를 마스킹합니다. 입력 요소를 일시적으로 이름을 바꾸면이를 수정할 수 있습니다 (하나만 있다고 가정).

form_object.elements['submit'].name = 'notsubmit';
form_object.submit();

하나 이상의 존재가 있다면, "제출"이라는 일련의 라디오 버튼이있는 경우 - 어떤 이유로. 같은 일을하십시오.

양식의 대상 속성을 설정할 수 있다는 것을 알고 있습니까?

<form target="_blank" method="post">
  <select onchange="load()">
    ...
  </select>
</form>
<script>
  load() {
    document.forms[0].action = this.value;
    document.forms[0].submit();
  }
</script>

아마도 나쁜 자바 스크립트를 용서하십시오. 나는 요즘 더 많은 jQuery를하는 경향이 있으므로 바닐라 JavaScript에서 녹슬 었습니다. 그러나 당신은 일반적인 아이디어를 얻습니다.

jQuery에 익숙하지는 않지만 이와 같은 일을 할 수 있어야합니다 (프로토 타입 스타일).

$('select-field').observe('change',function(event){
  window.open(this.options[this.selectedIndex].value,'_blank');
  this.form.submit();
}

이전에 JavaScript로 양식을 제출하는 데 몇 가지 이상한 문제가 있었지만 작동하지 않으면 전화를 걸 수 있습니다. click() 또는 동등한 fireEvent('click') 양식의 제출 버튼에 :

$('submit-button').fireEvent('click');
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top