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

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

---

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

---

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

---

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

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

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

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

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

---

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

https://facebook.github.io/react/docs/forms.html을 참조 하십시오

---

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

---

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>

---

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

---

I faced the same issue in one of our implementation.

we were using jquery.forms.js. which is a forms plugin and available here. http://malsup.com/jquery/form/

we used the same answer provided above and pasted

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

and it worked.Thanks.

---

Adding for posterity since this isn't chrome related but this was the first thread that showed up on google when searching for this form submission error.

In our case we attached a function to replace the current div html with a "loading" animation on submission - since it occurred before the form was submitted there was no longer any form or data to submit.

Very obvious error in retrospect but in case anyone ends up here it might save them some time in the future.

---

You can also solve it, by applying a single patch in the jquery-x.x.x.js just add after " try { rp; } catch (m) {}" line 1833 this code:

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

This validates when a form is not part of the body and adds it.

---

I have received this error in react.js. If you have a button in the form that you want to act like a button and not submit the form, you must give it type="button". Otherwise it tries to submit the form. I believe vaskort answered this with some documentation you can check out.

---

I saw this message using angular, so i just took method="post" and action="" out, and the warning was gone.

참고URL : https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected