Javascript

form 태그 안에서 button에 각각 action 넣기

킹king 2021. 7. 20. 09:54
반응형

예를들어 이것처럼 한 form안에 추가하기/수정하기와 같은 각각 다른 행동을 해야하는 경우 어떻게 해줘야할지 모르겠어서 찾아보다가 발견함.

 

<form method="POST" name="form">
  <button type="submit" onclick="javascript: form.action='/add'">추가하기</button>
  <button type="submit" onclick="javascript: form.action='/modify'">수정하기</button>
</form>

이렇게 작성하면 된다.

 

---------------------------------

 

1. 원래 코드

<form action="/add" method="POST" name="form">
  <button type="submit">추가하기</button>
  <button type="submit">수정하기</button>
</form>

이렇게 되어있다보니 무슨 button을 누르든 /add에 대한 내용으로 처리됨.

 

 

2. action 지우고 location 추가

<form method="POST" name="form"> <!--action="/add" 지움-->
  <button type="submit" onclick="location.href='/add'">추가하기</button>
  <button type="submit">수정하기</button>
</form>

그랬더니 저렇게 에러가 뜸. /add로 페이지가 가지도 않음.

 

 

3. type을 변경

<form method="POST" name="form">
  <button type="button" onclick="location.href='/add'">추가하기</button>
  <button type="submit">수정하기</button>
</form>

안가면 type을 바꿔달라길래 submit에서 button으로 바꿔줬더니 url은 /add로 이동하는데 여전히 에러가 뜸.

 

 

참고한 곳

https://kutar37.tistory.com/entry/%ED%95%9C%EA%B0%9C%EC%9D%98-Form%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC%EA%B0%9C-Submit-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

모든 게시물(특히 과거 게시물)은 잘못된 방법으로 처리한것을 좋다고 써놨을 수 있습니다. 참고만 하시고 틀린게 있다면 댓글 남겨주세요~