오류 가져오기 "양식이 연결되지 않아 양식 제출이 취소되었습니다."

오류 가져오기 "양식이 연결되지 않아 양식 제출이 취소되었습니다."

저는 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();
 }

크롬 56은 더 이상 이런 코드를 지원하지 않는 것 같습니다.아니니?예를 들어보면 다음과 같습니다.

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

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

빠른 답변: 양식을 본문에 추가합니다.

document.body.appendChild(form);

또는 위와 같이 jQuery를 사용하는 경우

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

상세정보 : HTML 표준에 따라 양식이 브라우징 컨텍스트(문서)와 관련이 없을 경우 양식 제출이 중단됩니다.

HTML 스펙 4.10.21.3.2 참조

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

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

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

키를 할 때 이에 Enter 키가 합니다.type="button".

의 하만있경우가 있다면.button와 함께type="submit"Enter 키를 누르면 예상대로 양식이 제출됩니다.

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

클릭한 사용자의 버튼에 속성 유형="버튼"을 추가하면 오류가 나타납니다. 저에게는 효과가 있었습니다.

또는 event.preventDefault(); 핸들에 Submit(event) {을(를) 포함합니다.

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

저는 리액트 프로젝트에서 이 문제를 발견했습니다.

문제는,

• '제출' 버튼 유형을 설정했습니다.
• 버튼에 onClick 핸들러를 설정했습니다.

그래서 버튼을 클릭하는 동안 온클릭 기능이 실행되고 양식이 제출되지 않고 콘솔이 출력됩니다.

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

간단한 해결 방법은 다음과 같습니다.

• 양식에서 제출 처리기 사용
• 버튼 자체에서 onClick 핸들러를 제거하고 'Submit' 유형을 유지합니다.

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

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

전경훈 님의 답변을 시도해보니 저도 jQuery를 사용하는 것이 잘 되지 않습니다.

그래서 jQuery 방법을 사용하여 양식을 본문에 추가해 보았습니다.

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

그리고 그게 효과가 있었어!

<button type="button">my button</button>

버튼 요소에 위의 속성을 추가해야 합니다.

은 리트에이본주다할것은야의해것면서을액▁the,,<form>. 합니다. DOM에서 렌더링합니다.

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

양식을때, 그서서류제면되출가래,면,state.submitting "."..▁message한충▁renders실▁"▁instead..." 메시지가 양식 이 가 발생합니다폼 대신 메시지가 렌더링되면 이 오류가 발생합니다.

폼 태그를 조건부 밖으로 이동하면 필요할 때 항상 위치할 수 있습니다.

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

그리고 그것은 성공하였다.감사해요.

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

로, 는 Mike Ruhlin과 방향을 바꾸고 있었습니다.react-router-dom Redirect양식 제출로

제출 기능에 e.proventDefault()를 넣었더니 경고가 제거되었습니다.

const Form = () => {

    const [submitted, setSubmitted] = useState(false);
    const submit = e => {
      e.preventDefault();
      setSubmitted(true);
    }

    if (submitted) {
        return <Redirect push to={links.redirectUrl} />
    };

    return (
          <form onSubmit={e => submit(e)}>
          ...
          </form>

    );
};

export default Form;

, 합니다: appendChild와 appendChild는 jquery와 같은 jquery를 합니다.document.body.appendChild(form[0])

이것은 크롬과 관련이 없기 때문에 후세를 위해 추가하는 것이지만 이것은 이 양식 제출 오류를 검색할 때 구글에 나타난 첫 번째 스레드였습니다.

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

돌이켜보면 매우 명백한 오류지만, 누군가가 여기에 오게 되면 미래에 시간을 절약할 수 있을 것입니다.

저는 react.js에서 이 오류를 받았습니다.양식에 단추처럼 사용하고 양식을 제출하지 않을 단추가 있는 경우 유형="button"을 지정해야 합니다.그렇지 않으면 양식을 제출하려고 합니다.저는 바스코트가 당신이 확인할 수 있는 문서로 이것에 답했다고 믿습니다.

react와 formik 같은 것을 사용하는 경우, 문제는 제출 단추의 onClick 핸들러에 있는 것 같습니다.

또한 jquery-x.x.x.js에서 "try {rp; } catch (m) {}" 행 뒤에 추가하는 단일 패치를 적용하여 이 문제를 해결할 수 있습니다.

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

양식이 본문의 일부가 아닌 경우 이를 확인하고 추가합니다.

내 HTML 코드가 없었기 때문에 나는 이 오류를 받고 있다는 것을(를)<body>꼬리표를 달다

를 사용<body>,언제document.body.appendChild(form);문에 추가할 본문 개체가 없습니다.

그<form>첫 번째 로드에서 DOM에 존재해야 합니다.'display: none'또는 DOM에서만 조건부로 사용할 수 있습니다.형식(모달 창과 같은)이 다음과 같아야 하는 경우 논리는'visibility: hidden'대신에'display: none'CSS에서, 또는 그 양식이 'POST' 또는 'GET'를 보낼 때 등.오류가 나타납니다.내 개인적인 경험으로.저는 스벨테를 사용합니다.

각도를 사용한 이 메시지를 보고 method="post"와 action=""를 꺼냈더니 경고가 사라졌습니다.

1. 단추는 양식 태그의 컨텍스트에 있어야 합니다.
2. 단추를 채우다type="submit"
3. 저도 같은 문제에 직면하고 있었습니다. 제거했습니다.onClick={onSubmit}버튼 태그를 작성합니다(여기서 Formik을 사용했습니다).

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