[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 )

 

고객이 응모하는 이벤트 페이지를 제작할 때,
고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다.
그리고 응모한 데이터를 넘기는 작업도 필요합니다.

이럴때 필요한

이벤트 페이지용,
개인정보 입력 후,
자바스크립트를 이용하여 유효성 검사를 한 후
ajax의 json type으로 데이터를 넘겨주는 작업을 하겠습니다.

구현내용:

· UI: html <form> <input>태그를 사용
· getElementById 를 이용한 객체 접근 방식 사용
· 올드한 방법인, form을 이용한 객체 접근 방식 사용
· 자바스크립트를 이용한 유효성 검사
· ajax json 타입으로 데이터 전송

 

유의사항:
· ajax url 연결 안 됨
· 주소검색은 api 연결 안 됨
· 먼저 제이쿼리 스크립트 연결

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 

 

getElementById 를 이용한 객체 접근 방법

<html, javascript>

<form class="eventBox" id="eventBox" name="infoBox">
		<div class="info">
			<input type="text" name="name" id="name" maxlength="15" placeholder="이름" />
		</div>
		<div class="info">
			<input type="text" name="tel" id="tel" maxlength="15" placeholder="핸드폰 번호" />
		</div>
		<div class="info">
			<input type="text" name="url" id="url" maxlength="200" placeholder="공유된 SNS 주소(URL)을 입력해주세요." />
		</div>
		<div class="info">
			<input type="text" name="post" id="post" maxlength="10" placeholder="우편번호" style="width: auto;" />
			<button type="button" onclick="win_zip('infoBox', 'post', 'add1', 'add2', 'add3', 'ex_jibeon');">주소 검색</button>
			<!--			버튼 작동 안함-->
		</div>
		<div class="info">
			<input type="text" name="add1" id="add1" maxlength="30" placeholder="기본주소" />
		</div>
		<div class="info">
			<input type="text" name="add2" id="add2" maxlength="30" placeholder="상세주소" />
		</div>
		<div class="info">
			<input type="text" name="add3" id="add3" maxlength="30" placeholder="참고주소" />
		</div>
		<div class="notice">
			• 상품 지급을 위하여 휴대폰 번호, 주소를 정확히 입력해주세요.<br />
			• 여러번 응모는 가능합니다. 단, 같은 공유 주소는 한 번만 인정합니다.<br />
			• 개인정보 수집 및 활용<br />
			&nbsp; - 수집목적: 이번트 응모에 따른 추첨 및 경품 지급<br />
			&nbsp; - 보관기관: 이번트 종료일로부터 30일(낙첨자 정보는 보관하지 않음)<br />
			&nbsp; - 행사담당: 갓디노 (010-xxxx-xxxx)<br />
		</div>
		<div class="info" style="text-align: center;">
			<label class="agree"><input type="checkbox" id="agree" name="agree" style="width: auto;height: auto;vertical-align: -2px;" /> 개인정보수집이용에 동의합니다.</label>
		</div>
		<div class="info" style="text-align: center;">
			<button type="button" name="ok" style="width: 50%;border-radius: 8px;" onclick="event_pass();">응모하기</button>
		</div>

		<script type="text/javascript">
    
			let name = document.getElementById('name');
			let tel = document.getElementById('tel');
			let url = document.getElementById('url');
			let add1 = document.getElementById('add1');
			let add2 = document.getElementById('add2');
			let add3 = document.getElementById('add3');
			let agree = document.getElementById('agree');

			function event_pass() {
				let regExp_tel = /^01\d-?\d{3,4}-?\d{4}$/; //핸드폰 번호 정규식

				if (name.value == "") {
					alert("이름을 입력해주세요");
					name.focus();
					return;
				}

				if (tel.value == "") {
					alert("핸드폰 번호를 입력해주세요");
					tel.focus();
					return;
				}

				if (!regExp_tel.test(tel.value)) { //핸드폰 번호 정규식 검사
					alert("정확한 핸드폰 번호를 입력해주세요");
					tel.focus();
					return;
				}

				if (url.value == "") {
					alert("공유된 SNS주소(URL)을 입력해주세요");
					url.focus();
					return;
				}

				if (post.value == "") {
					alert("우편번호를 검색해주세요");
					post.focus();
					return;
				}

				if (add1.value == "") {
					alert("주소를 입력해주세요");
					add1.focus();
					return;
				}

				if (!agree.checked) {
					alert("개인정보 수집 및 활용에동의해주세요.");
					agree.focus();
					return
				}


				$.ajax({
					type: "POST",
					url: "/xxxx.php", //데이터 전송받는 특정 주소
					data: {
						"name": name.value, //테이블 제목 : 전송받는 데이터의 값
						"tel": tel.value,
						"post": post.value,
						"address": add1.value + "|" + add2.value + "|" + add3.value,
						"url": url.value,
					},
					dataType: "json",
					success: function(json) {
						if (json) {
							if (json.result == true) { // 응모 성공
								alert("응모가 완료되었습니다.");
								reset();
							}
						}
						return;
					}
				});
			}

		</script>
	</form>

 

<css>

.eventBox {
background-color: #efefef;
max-width: 700px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}

.eventBox .info {
margin-bottom: 10px;
}

.eventBox .info input {
width: 100%;
height: 40px;
border: 1px solid #dedede;
padding-left: 10px;
box-sizing: border-box;
}

.eventBox button {
height: 40px;
background-color: #555555;
color: #fff;
padding: 0 15px;
box-sizing: border-box;
}

.eventBox .notice {
margin: 10px auto;
border: 1px solid #dedede;
background-color: #fff;
font-size: 12px;
padding-left: 10px;
}

.eventBox .agree {
font-weight: bold;
text-align: right;
font-size: 12px;
}

 

한번에 보기(Result 클릭)

form을 이용한 객체 접근 방법

form은 document의 직계 객체로 설계되어
name을 이용하여
자바스크립트에서 form 요소의 객체에 바로 접근이 가능합니다.

올드한 방식이지만, input 하위 객체에 일일이 변수에 할당할 필요가 없어서,
코드가 간결하고, 구조가 단순하고 직관적입니다.

 

<html, javascript>

<form class="eventBox" name="infoBox">
  <div class="info">
    <input type="text" name="name" maxlength="15" placeholder="이름" />
  </div>
  <div class="info">
    <input type="text" name="tel" maxlength="15" placeholder="핸드폰 번호" />
  </div>
  <div class="info">
    <input type="text" name="url" maxlength="200" placeholder="공유된 SNS 주소(URL)을 입력해주세요." />
  </div>
  <div class="info">
    <input type="text" name="post" maxlength="10" placeholder="우편번호" style="width: auto;" />
    <button type="button" onclick="win_zip('infoBox', 'post', 'add1', 'add2', 'add3', 'ex_jibeon');">주소 검색</button>
  </div>
  <div class="info">
    <input type="text" name="add1" maxlength="30" placeholder="기본주소" />
  </div>
  <div class="info">
    <input type="text" name="add2" maxlength="30" placeholder="상세주소" />
  </div>
  <div class="info">
    <input type="text" name="add3" maxlength="30" placeholder="참고주소" />
  </div>
  <div class="notice">
    • 상품 지급을 위하여 휴대폰 번호, 주소를 정확히 입력해주세요.<br />
    • 여러번 응모는 가능합니다. 단, 같은 공유 주소는 한 번만 인정합니다.<br />
    • 개인정보 수집 및 활용<br />
    &nbsp; - 수집목적: 이번트 응모에 따른 추첨 및 경품 지급<br />
    &nbsp; - 보관기관: 이번트 종료일로부터 30일(낙첨자 정보는 보관하지 않음)<br />
    &nbsp; - 행사담당: 갓디노 (010-xxxx-xxxx)<br />
  </div>
  <div class="info" style="text-align: center;">
    <label class="agree"><input type="checkbox" name="agree" style="width: auto;height: auto;vertical-align: -2px;" /> 개인정보수집이용에 동의합니다.</label>
  </div>
  <div class="info" style="text-align: center;">
    <button type="button" name="ok" style="width: 50%;border-radius: 8px;" onclick="event_pass();">응모하기</button>
  </div>

  <script type="text/javascript">
    function event_pass() {
      var f = document.infoBox;
      var regExp_tel = /^01\d-?\d{3,4}-?\d{4}$/;

      if (f.name.value == "") {
        alert("이름을 입력해주세요");
        f.name.focus();
        return;
      }

      if (f.tel.value == "") {
        alert("핸드폰 번호를 입력해주세요");
        f.tel.focus();
        return;
      }

      if (!regExp_tel.test(f.tel.value)) {
        alert("정확한 핸드폰 번호를 입력해주세요");
        f.tel.focus();
        return;
      }

      if (f.url.value == "") {
        alert("공유된 SNS주소(URL)을 입력해주세요");
        f.url.focus();
        return;
      }

      if (f.post.value == "") {
        alert("우편번호를 검색해주세요");
        f.post.focus();
        return;
      }

      if (f.add1.value == "") {
        alert("주소를 입력해주세요");
        f.add1.focus();
        return;
      }

      if (!f.agree.checked) {
        alert("개인정보 수집 및 활용에동의해주세요.");
        f.agree.focus();
        return
      }


      $.ajax({
        type: "POST",
        url: "/xxxx.php",
        data: {
          "name": f.name.value,
          "tel": f.tel.value,
          "post": f.post.value,
          "address": f.add1.value + "|" + f.add2.value + "|" + f.add3.value,
          "url": f.url.value,
        },

        dataType: "json",
        success: function(json) {
          if (json) {
            if (json.result == true) { // 응모 성공
              alert("응모가 완료되었습니다.");
              f.reset();
            }
          }
          return;
        }
      });
    }

  </script>
</form>

 

<css>는 위와 동일

 

한 번에 보기(Result 클릭)