🚦 HTML5의 다른 작업에 양식 제출

오랫동안 저는 하나의 Form이 JS 없이 하나의 Action URL에만 제출될 수 있다고 믿었습니다.

I couldn’t be more wrong.

하지만 JavaScript 및 AJAX/Fetch를 사용하여 과거의 방식을 살펴보겠습니다.

문제

사용자 프로필에 주소를 추가하거나 업데이트하려는 HTML 양식을 따르는 것을 고려하십시오.

<form id='addressForm'>
  ...
  <!-- Form Fields -->
  ...
  <button id='addAddress' class="btn btn-primary">Add Address</button>
  <button id='updateAddress' class="btn btn-success">Update Address</button>
</form>

위의 양식에는 Add Address 또는 Update Address에 대한 제출 버튼이 있지만 POST 요청은 /addAddress에만 보냅니다.

즉, 업데이트 주소는 현재 주소를 업데이트하는 대신 새 주소를 추가하게 됩니다.

이 작업을 수행하려면 JavaScript를 사용해야 합니다.

이제 JavaScript에는 여러 가지 방법이 있습니다. 한 가지 간단한 방법은 AJAX 요청을 통해 양식을 제출하는 것입니다.

AJAX를 사용하여 위의 양식을 다른 작업 끝점에 제출하는 방법을 살펴보겠습니다.

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('#addressForm')
  const addButton = document.querySelector('#addAddress')
  const updateButton = document.querySelector('#updateAddress')

  addButton && addButton.addEventListener('click', (e) => {
    e.preventDefault()

    if (!form.checkValidity()) {
      return
    }

    fetch('/addAddress', { method: 'POST', body: new FormData(form) })
      .then((r => r.json()))
      .then(console.log)
  })

  updateButton && updateButton.addEventListener('click', (e) => {
    e.preventDefault()

    if (!form.checkValidity()) {
      return
    }

    fetch('/updateAddress', { method: 'POST', body: new FormData(form) })
      .then((r => r.json()))
      .then(console.log)
  })
})

이제 JavaScript를 사용하면 HTML과 변형 제출이 매우 밀접하게 결합되어 있음을 알 수 있습니다.

양식을 여러 끝점으로 전송하는 이 이전 방식을 확인할 수 있습니다https://multi-action-forms.netlify.app/with-ajax.html.

Now what is the solution?

해결책

제출 버튼에 대한 이러한 속성을 발견했습니다. 여기에서 다른 HTTP 메서드 및 인코딩 유형을 사용하여 다른 URL에 제출할 양식을 구체적으로 만들 수 있습니다.

이러한 속성은 fromaction, formmethod 및 formenctype입니다.

이러한 속성을 사용하여 일반 제출 버튼과 기본 속성을 양식에 추가하는 작업으로 돌아갈 수 있습니다.

이와 함께 이전 줄에서 언급한 속성을 가진 다른 제출 버튼을 추가할 것입니다.

새 HTML 양식은 다음과 같습니다.

<form action="/addAddress" method="POST">
  ...
  <!-- Form Fields -->
  ...
  <button type="submit" class="btn btn-primary">Add</button>
  <button type="submit" class="btn btn-success" formaction="/updateAddress" formmethod="POST">Update</button>
</form>

버튼뿐만 아니라 버튼 유형의 입력에서도 이러한 속성을 허용하여 양식 제출을 다른 끝점으로 보낼 수 있습니다.

이익

기본 기능을 위해 JS를 첨부할 필요가 없음

HTML5 유효성 검사 API를 정상적인 흐름으로 활용할 수 있음

JS가 비활성화된 Pages에서 양식이 작동할 수 있음(예외 있음)

우려 사항

브라우저 지원, 이전 브라우저는 이 기능과 작동하지 않을 수 있으므로 Polyfill/Shim이 필요할 수 있습니다

.

단일 페이지 응용 프로그램, MicroFrontends 등과 같은 최신 프런트 엔드 앱은 이 작업을 위해 약간의 추가 조정이 필요할 수 있습니다

.

time2hack / 멀티 액션 양식 예제

Demo

결론

적은 코드로 더 많은 작업을 수행하기 위해 브라우저의 내장 API를 활용하는 방법을 살펴보았습니다.

Would you use in you application? Why or Why not?

댓글 💬 또는 Twitter at 및/또는을 통해 알려주세요.

이 글이 도움이 되셨다면 다른 사람들과 공유해주세요 🗣

받은 편지함으로 바로 새 게시물을 받으려면 블로그를 구독하십시오.

학점

Iconfinder의 아이콘

사진 제공: Mitchell Luo on Unsplash

2021년 1월 13일 https://time2hack.com에서 원래 게시되었습니다.