"양식이 연결되지 않아서 양식 제출이 취소되었습니다"오류가 발생 함

JQuery 1.7이있는 오래된 웹 사이트가 있으며 이틀 전에 올바르게 작동합니다. 갑자기 일부 버튼이 더 이상 작동하지 않으며 버튼을 클릭하면 콘솔에 다음 경고가 표시됩니다.

양식이 연결되어 있지 않아 양식 제출이 취소되었습니다.

클릭 뒤의 코드는 다음과 같습니다.

 this.handleExcelExporter = function(href, cols) {
   var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
   $('input[name="layout"]', form).val(JSON.stringify(cols));
   $('input[type="submit"]', form).click();
 }

Chrome 56은 더 이상 이러한 종류의 코드를 지원하지 않는 것 같습니다. 그렇지 않습니까? 그렇다면 내 질문은 다음과 같습니다.

1. 왜 이런 일이 갑자기 일어 났습니까? 사용 중단 경고가 없습니까?
2. 이 코드의 해결 방법은 무엇입니까?
3. 코드를 변경하지 않고 크롬 (또는 다른 브라우저)이 이전처럼 작동하도록하는 방법이 있습니까?

PS 최신 파이어 폭스 버전 (메시지없이)에서도 작동하지 않습니다. 또한 IE 11.0 & Edge에서는 작동하지 않습니다! (메시지없이 모두)

빠른 답변 : 본문에 양식을 추가하십시오.

document.body.appendChild(form);

또는 위와 같이 jQuery를 사용하는 경우 : $(document.body).append(form);

세부 정보 : HTML 표준에 따라 양식이 탐색 컨텍스트 (문서)와 연결되어 있지 않으면 양식 제출이 중단됩니다.

HTML SPEC 4.10.21.3.2 참조

Chrome 56에서는이 사양이 적용되었습니다.

크롬 코드 차이 @@ -347,9 +347,16 @@ 참조

당신의 질문 # 1에 대한 추신. 내 의견으로는 아약스와 달리 양식 제출은 즉각적인 페이지 이동을 유발합니다.
따라서 '더 이상 사용되지 않는 경고 메시지'를 표시하는 것은 거의 불가능합니다.
또한이 심각한 변경 사항이 기능 변경 목록에 포함되지 않는 것은 용납 될 수 없다고 생각합니다. Chrome 56 기능 -www.chromestatus.com/features#milestone%3D56

Enter 키를 눌러 양식을 제출하려고 할 때 React JS에이 오류가 표시되면 양식을 제출하지 않은 양식의 모든 단추에 type="button".

Enter 키 button를 type="submit"눌러 하나만 있으면 예상대로 양식을 제출합니다.

참조 :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

클릭하는 사람의 버튼에 속성 type = "button" 을 추가 하면 오류가 표시됩니다.

양식이 문서에 있는지 확인해야합니다. 본문에 양식을 추가 할 수 있습니다.

또는 event.preventDefault ()를 포함하십시오. handleSubmit (event) {

참조 https://facebook.github.io/react/docs/forms.html를

양식 초기화에 jQuery를 사용하고 있습니다.

@KyungHun Jeon의 답변을 시도하면 jQuery를 사용하는 것이 작동하지 않습니다.

그래서 jQuery 방법을 사용하여 본문에 양식을 추가하려고했습니다.

$(document.body).append(form);

그리고 효과가있었습니다!

React에서 이것을 볼 때주의해야 할 점 <form>은 DOM이 제출하는 동안 여전히 DOM에서 렌더링해야한다는 것입니다. 즉, 이것은 실패 할 것이다

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

따라서 양식이 제출되고 state.submitting설정되고 양식 대신 "제출 중 ..."메시지가 렌더링되면이 오류가 발생합니다.

조건부 외부로 양식 태그를 이동하면 필요할 때 항상 해당 위치에 있어야합니다.

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>

구현 중 하나에서 동일한 문제에 직면했습니다.

우리는 jquery.forms.js를 사용하고있었습니다. 양식 플러그인이며 여기에서 사용할 수 있습니다.http://malsup.com/jquery/form/

위에 제공된 동일한 답변을 사용하여 붙여 넣었습니다.

$(document.body).append(form);

그리고 그것은 효과가 있었다.

전경헌의 답변에 따라 appendChild는 dom 노드를 예상하므로 jquery 객체에 색인을 추가하여 노드를 반환합니다. document.body.appendChild(form[0])

크롬과 관련이 없기 때문에 후손을 추가하면이 양식 제출 오류를 검색 할 때 Google에 처음으로 표시되는 스레드였습니다.

이 경우 제출시 현재 div html을 "로드"애니메이션으로 대체하는 기능을 추가했습니다. 양식이 제출되기 전에 발생했기 때문에 제출할 양식 또는 데이터가 더 이상 없었습니다.

돌이켜 보면 매우 명백한 오류가 있지만 여기에 누군가가 있으면 나중에 시간을 절약 할 수 있습니다.

react.js에서이 오류를 받았습니다. 양식처럼 버튼처럼 작동하고 양식을 제출하지 않으려는 버튼이있는 경우 type = "button"을 지정해야합니다. 그렇지 않으면 양식을 제출하려고 시도합니다. vaskort가 체크 아웃 할 수있는 문서로 이것에 대답했다고 생각합니다.

vue의 button 요소에 type = "button"속성을 추가하여 메시지를 제거 할 수있었습니다.

jquery-xxxjs에 단일 패치를 적용하여 "try {rp;} catch (m) {}"행 1833 다음에 추가하면이 문제를 해결할 수도 있습니다.

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

양식이 본문의 일부가 아닌 경우 유효성을 검사하고 추가합니다.

각도를 사용 하여이 메시지를 보았으므로 method = "post"및 action = ""을 꺼내고 경고가 사라졌습니다.