HTML 단추 클릭하면 단추 제목 변경 후 비활성 상태로 만들기

2022. 6. 8. 03:07

<참조> https://www.youtube.com/watch?v=c8flZcNRrkg

HTML 단추 클릭하면 단추 제목 변경 후 비활성 상태로 만들기

글. 수알치 오상문

예제에서 이메일 발송 부분이 나오므로 [참고]에 있는 사이트에 미리 가입하고 진행한다.

[참고] POST 테스트를 위한 Formspree 사이트 가입하기

(1) 사이트 링크에 접속한다. https://formspree.io/register

(2) "Get started"를 클릭한다.

(3) 정보를 입력하고 "Register" 단추를 클릭한다.

비밀번호는 8글자 이상이고 대문자, 숫자, 특수문자를 포함해야 한다.

(4) 등록한 이메일로 인증 메일이 발송되었으므로 그 이메일에서 인증 링크를 눌러서 인증을 진행한다.

(5) 사이트에 로그인(Sign In) 한다.

(6) 왼쪽 붉은색 + 단추를 눌러 프로젝트를 만든다. (기본 설정대로 등록해도 됨)

(7) 다시 + 단추를 눌러 폼을 만든다. (기본 설정대로 등록해도 됨)

(6) 다음 화면이 나오면 Copy를 눌러서 POST URL을 복사한다. (메모장에 기록하자)

다음 예제는 이메일과 메시지를 입력하면 이메일을 전송 요청하고 단추 제목을 "발송 완료"로 변경 후 비활성 상태로 바꾼다.

[소스 코드] email_send.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Send Email</title>
</head>
<body>
  <h3>이메일 발송</h3>  
  <form action="복사한 URL을 지정" method="POST" onsubmit="emailFormSubmit(this);" target="_blank">
     <div>
      <label>
        Your e-mail <input type="email" name="email" required autocomplete="off">
      </label>
    </div><br> 
    <div>
    <label>
    Your message:
    <textarea name="message"></textarea>     
    </label>   
    <div><br>
      <button type="submit">발 송</button>
    </div>    
  </form>
  <script>    
  function emailFormSubmit(form) {    
    // form.inert = true; 
    form.querySelector('button[type="submit"]').innerHTML = "발송 완료";
    form.querySelector('button[type="submit"]').disabled = true;
  }
  </script>
</body>
</html>

예제 소스 코드를 email.html 파일로 저장하고 파일 더블클릭하여 브라우저에서 실행하고 테스트 한다.

[참고] 동영상

https://www.youtube.com/watch?v=c8flZcNRrkg

저작자표시 비영리 변경금지

'JavaScript, jQuery' 카테고리의 다른 글

DOMContentLoaded vs. Load 이벤트 (0)	2022.06.09
자바스크립트, 객체 자료형 예제 (0)	2022.06.08
jQuery, 제이쿼리 가이드 (TCP School) (0)	2022.06.06
자바스크립트 가이드 (TCP School) (0)	2022.06.06
자바스크립트 따옴표(')/큰따옴표(") 섞인 문자열 처리 3가지 방법 (0)	2022.05.31

수알치 블로그