Form submit 안됨 - Form submit andoem

Question

�Ϲ�
ȸ��
��
ȸ��

PHP��/�Լ�/��ӿ� ��亯
HOME > Q&A > PHP��/�Լ�/��ӿ� ��亯

��

�ڹٽ�ũ��Ʈ�� submit �ߴµ� �� ȵǴ°��? ��,��
�۾��	��г��	�� ¥	15-06-08 17:44	�� ȸ	17045
��URL	https://www.phpschool.com/link/qna_function/415642 �� SyntaxHighlight��
�ҽ� ��ø� �� ̴µ� submit�� ȵǳ׿� ��,�� �� ̷� ��ѰͿ� ��ð� �� ,�� �� ø� "�� ϴ�. " �� ׿� ��,�� [ �� Source ] <form name="pom" id="pom" method="post" action="�ּ�"> <!-- <label>Name</label> --> <input class="pom" name="name" placeholder="NAME"> <input type="button" id="submit" name="submit" onclick="javascript:email_mainform();"; > </form> <script type="text/javascript"> var frm = document.pom; if(frm.message.value == ""){ alert("�� Է��ּ��."); frm.message.focus(); return; } frm.submit(); //��ȿ�� ˻�� submit ��!!! } </script> �亯ä�� 46% ��õ 0 �� Ǿ��? ��õ 0 �� ȵ˴ϴ�.

��

�ű� ��õ �亯 ��ȸ
�Խù� 154,209��

��
0��õ 12�亯�Ϸ� 1k��ȸ
0��õ 11�亯�Ϸ� 668��ȸ
0��õ 9�亯�Ϸ� 777��ȸ
0��õ 3�亯�Ϸ� 451��ȸ
0��õ 6�亯�� 672��ȸ
0��õ 6�亯�Ϸ� 2k��ȸ
0��õ 10�亯�� 317��ȸ
0��õ 2�亯�Ϸ� 316��ȸ
0��õ 2�亯�� 853��ȸ
0��õ 2�亯�� 414��ȸ
0��õ 6�亯�Ϸ� 424��ȸ
0��õ 1�亯�Ϸ� 553��ȸ
0��õ 2�亯�Ϸ� 338��ȸ
0��õ 0�̴亯 576��ȸ
0��õ 4�亯�� 424��ȸ
0��õ 3�亯�� 905��ȸ
0��õ 2�亯�� 402��ȸ
0��õ 6�亯�Ϸ� 789��ȸ
0��õ 3�亯�Ϸ� 468��ȸ
0��õ 2�亯�� 346��ȸ

기록 (21.7.19 ~

개발/React

Form submission canceled because the form is not connected: 리액트 form 하나에 button 2개 있을때, 엔터키로 submit이 안되는 현상

안뇽! 2022. 1. 31. 03:53

HTML 카테고리에 넣으려 했는데, 생각해보니 HTML로 이런 오류를 만나진 않을 것 같고 나도 리액트하다가 마주친 오류이기 때문에

리액트 카테고리에 작성함

타입스크립트를 연습하면서 todolist를 만드는 도중, 엔터키를 쳤을때 form에서 submit이 안되는 현상이 있었다.

오류

form하나에 button이 2개인데, button의 타입을 명시하지 않았기 때문

내 리액트 tsx 코드는 이렇다.

const AddNewModal: React.FC<Props> = ({ onClick, newTodo, setNewTodo, addNewTodo }) => {
  ..(생략)..

  return (
    <form onSubmit={(e) => submitFunction(e)}>
      <button onClick={onClick}>나가기</button>
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>
      <button type="submit">할 일 추가</button>
    </form>
  );
};

submit이 안되었던 이유는 '나가기'버튼의 type이 정해져 있지 않아, form태그 내부에서의 기본값인 submit으로 되어있었기 때문이다.

아래 참고자료 두글을 보고 아래와 같이 바꾸니 해결되었다.

해결책 1 : button 의 type을 명시하기

나가기 버튼의 type은 button,

할 일 추가 버튼의 type은 submit

명시하기

  return (
    <form onSubmit={(e) => submitFunction(e)}>

      <button type="button" onClick={onClick}>
        나가기
      </button>
      
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>

      <button type="submit">할 일 추가</button>
    </form>
  );

해결책2 : form태그 1개에 button 1개만 넣어주기

또다른 방법으로 아래처럼 form 태그 1개에 button 1개만 넣어주는 방법도 있다.

return (
    <>
      <form onSubmit={(e) => submitFunction(e)}>
        <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>
        <button>할 일 추가</button>
      </form>
      <button onClick={onClick}>나가기</button>
    </>
  );