반응형

외국인 주민등록번호의 유효성을 검사하는 Javascript Logic입니다.

예전 포스팅하였던 내국인 주민등록번호 유효성 검사 로직에 덮붙임 형태로 하였습니다.

<!DOCTYPE html>
<html>
<head>
 <title>회원가입-자바스크립트</title>
<script  language="javascript">
    function validate() {
        var num1 = document.getElementById("unum1");
        var num2 = document.getElementById("unum2");

        var ssn1 = num1.value;
        var ssn2 = num2.value;

        var isj = isKorJumin(ssn1, ssn2);

        console.log(isj);
    }

    function isKorJumin(ssn1, ssn2)
    {
      var ssn2f = ssn2.substr(0, 1);
      var rn = ssn1 + ssn2;

      if ( ssn2f == '5' || ssn2f == '6' || ssn2f == '7' || ssn2f == '8' )
      {
        var type = 'frn';
      }
      else
      {
        var type = 'kor';
      }

      return isJumin( rn, type );
    }

    function isJumin( rn, type ) {
        rn = rn.split("-").join('');
        if( rn.length !== 13 ) return false;

        var checkSum = 0;
        for(var i=0; i<12; i++) checkSum += ((rn.substr(i,1)>>0)*((i%8)+2));

        var korMatch = (11-(checkSum%11))%10 == rn.substr(12,1);
        var frnMatch = (13-(checkSum%11))%10 == rn.substr(12,1);

        if( type === 'kor' ) return korMatch;
        else if( type === 'frn' ) return frnMatch;
        else return korMatch || frnMatch;
    }


</script>
<style>
   @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
   body{font-family: 'Nanum Pen Script';}
</style>
</head>
<body>
<table width="350" height="100" border="1" align="center" cellspacing="0">
  <tr height="10" align="center">
      <td colspan="2" style="background:navy;" ><font color=white><b>주민등록 유효성검사</b></font></td>
  </tr>
  <tr>
      <td align="center">주민등록번호:</td>
      <td align="center">
             <input type="text" name="unum1" id="unum1" size="12" maxlength="6">-</input>
             <input type="text" name="unum2" id="unum2" size="12" maxlength="7"></input><br/>
   	    예) 123456-1234567
      </td>
  </tr>
</table>
<center>
  <br/>
  <input type="button" value="검사" style="border-radius:5px; font-s" onclick="validate();" />
  <input type="reset" value="다시입력" style="border-radius:5px;" />
</center>
</body>
</html>

주민등록번호 검사 로직.zip
0.00MB

 

2020/02/24 - [유용한 활용팁] - Javascript 내국인 주민등록번호 유효성 검사

 

Javascript 내국인 주민등록번호 유효성 검사

PHP가 아닌 클라이언트인 브라우저에서 Javascript로 주민등록번호 유휴성 검사를 하는 로직입니다. 외국인의 경우 별도 로직을 구성하여야 해서 내국인만 정리하였습니다. function isKorJumin(ssn1, ssn2)

han288.tistory.com

 

반응형


반응형

Javascript JQuery를 이용하여 금액 입력 필드에 숫자만 입력하게 하고 입력 후 콤마 표시를 하게 하는 방법입니다.

DB 또는 파라미터로 받은 숫자를 PHP함수로 콤마를 넣는 방법입니다.

숫자에콤마표시하기

 

INPUT 필드에 onkeyup 이벤트 발생 시 정규식을 이용, 숫자가 아닌 값은 지워버리게 합니다.

 onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

 

INPUT 필드를 빠져 나갈 때 Blur 이벤트 발생 시 정규식을 이용하여 콤마가 들어가게 처리를 합니다.

    <script>
      $('#amt').blur(function()
      {
        var str = $("#amt").val();
        str = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')
        $("#amt").val(str);
      });
    </script>

 

PHP의 number_format을 사용하게 되면 숫자 데이터에 콤마가 들어가서 출력을 하게 됩니다.

number_format($amt)

number_format

(PHP 4, PHP 5, PHP 7)

number_format  Format a number with grouped thousands

Description

number_format ( float $number [, int $decimals = 0 ] ) : string

number_format ( float $number , int $decimals = 0 , string $dec_point = "." , string $thousands_sep = "," ) : string

This function accepts either one, two, or four parameters (not three):

If only one parameter is given, number will be formatted without decimals, but with a comma (",") between every group of thousands.

If two parameters are given, number will be formatted with decimals decimals with a dot (".") in front, and a comma (",") between every group of thousands.

If all four parameters are given, number will be formatted with decimals decimals, dec_point instead of a dot (".") before the decimals and thousands_sep instead of a comma (",") between every group of thousands.

Parameters

number

The number being formatted.

decimals

Sets the number of decimal points.

dec_point

Sets the separator for the decimal point.

thousands_sep

Sets the thousands separator.

Return Values

A formatted version of number.

Changelog

VersionDescription

7.2.0 number_format() was changed to not being able to return -0, previously -0 could be returned for cases like where number would be -0.01.
5.4.0 This function now supports multiple bytes in dec_point and thousands_sep. Only the first byte of each separator was used in older versions.

Examples

<?php

$number = 1234.56;

// english notation (default)
$english_format_number = number_format($number);
// 1,235

// French notation
$nombre_format_francais = number_format($number, 2, ',', ' ');
// 1 234,56

$number = 1234.5678;

// english notation without thousands separator
$english_format_number = number_format($number, 2, '.', '');
// 1234.57

?>

 

소스 전문입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form>
    <input type="text" id="amt" name="amt" value="<?= number_format($amt) ?>" class="form-control" placeholder="금액을 입력하세요." onkeyup="this.value=this.value.replace(/[^0-9]/g,'');">
    <script>
      $('#amt').blur(function()
      {
        var str = $("#amt").val();
        str = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')
        $("#amt").val(str);
      });
    </script>
  </form>
</body>
</html>
반응형


반응형

Javascript jQuery countdown 플러그인을 이용하여 타이머를 제작 사용하는 방법입니다.

 

사이트에서 타임 세일이나 제한 시간을 두었을 때 고객에게 남은 시간을 보여 줄 수 있습니다.

jQuery countdown

1. jQuery는 3.5.1 최신 버전을 사용하여도 정상 동작을 합니다.

2. jquery.plugin.min.js

3. jquery.countdown.js

4. jquery.countdown-ko.js : 한글을 사용하기 위해 추가합니다.

5. 프로그램 내에 종료 예정일을 지정하는 방법입니다.

new Date(year, month, date, hours, minutes, seconds, ms)

- year는 반드시 네 자리 숫자여야 합니다. 2020으로 작성하여야 합니다. 20으로 작성하면 안됩니다.
- month는 0(1월)부터 11(12월) 사이의 숫자여야 합니다. 1월이 1이 아닙니다.
- date는 일을 나타내는데, 값이 없는 경우엔 1일로 처리됩니다.
- hoursㆍminutesㆍsecondsㆍms에 값이 없는 경우엔 0으로 처리됩니다.

 

예제 소스 입니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="css/jquery.countdown.css">
<style type="text/css">
#defaultCountdown { width: 240px; height: 50px; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/jquery.plugin.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/jquery.countdown-ko.js"></script>
<script>
$(function () {
	var austDay = new Date();
	//austDay = new Date(austDay.getFullYear() + 0, 7 - 1, 2);
	// new Date(year, month, date, hours, minutes, seconds, ms)
	austDay = new Date(2020, 6, 2, 10, 0, 0, 0);
	$('#defaultCountdown').countdown({until: austDay});
	$('#year').text(austDay.getFullYear());
});
</script>
</head>
<body>
<div id="defaultCountdown"></div>
</body>
</html>

 

전체 Full Source를 첨부 드립니다.

jquery.countdown.package-2.1.0.zip
0.14MB

 

2020/06/10 - [유용한 활용팁] - Javascript Jquery vTicker 사용하여 상하 슬라이드 롤링하기

 

Javascript Jquery vTicker 사용하여 상하 슬라이드 롤링하기

Jquery vTicker를 사용하여 위아래로 롤링 처리 방법입니다. 1. jquery-3.4.1.min.js 파일을 서버에 업로드합니다. 2. jquery.vticker.min.js 파일을 서버에 업로드합니다. 3. 샘플 소스 정상 작동하는지 확..

han288.tistory.com

 

반응형


반응형

Jquery vTicker를 사용하여 위아래로 롤링 처리 방법입니다.

1. jquery-3.4.1.min.js 파일을 서버에 업로드합니다.

2. jquery.vticker.min.js 파일을 서버에 업로드합니다.

3. 샘플 소스 정상 작동하는지 확인을 합니다.

4. li 태그 자리를 공지사항이나 필요한 내용으로 바꿉니다.

※ 샘플 소스를 아래 첨부하였습니다.

 

아래와 같이 코딩을 하면 롤링되는 것을 확인하실 수 있습니다.

<div id="example">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>
<script type="text/javascript" charset="utf-8" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./jquery.vticker.min.js"></script>
<script>
$(function() {
  $('#example').vTicker();
});
</script>

기존에 jquery를 사용하시는 경우에 jquery.vticker.min.js 파일만 올려서 점검하시는 경우가 있을 수 있습니다.

이 때, Uncaught TypeError: a.obj.animate is not a function 에러가 발생할 수가 있습니다.

이럴때는 jquery slim 버전이어서 안되는 것입니다. 이 때는 min 버전은 인클루드 하셔야 해결이 됩니다.

Javascript Jquery vTicker 사용하여 상하 슬라이드 롤링하기

 

vticker.zip
0.03MB

 

 

반응형


반응형

입력한 날짜와 시간이 현재 시간과 비교하여 이전인지 여부를 체크하는 Javascript입니다.

입력한 시간이 현재 시간 이전인지 여부 체크

1. Javascript의 new Data 객체를 이용하여 입력된 String값으로 Date를 생성합니다.

2. 현재날짜의 Date와 입력된 Date를 비교합니다.

3. 입력된 Date에서 현재날짜의 Date를 뺀 결과값이 음수이면 결과는 False입니다.

/**
 * 시간 선택 시 현재날의 현재 이전인지 여부 체크하는 함수
 */
function isUseDay(strTime, strDay)
{
	var tHH = Number(strTime.substring(2,4));
	var tMM = Number(strTime.substring(4,6));

	var rYY = Number(strDay.substring(0,4));
	var rMM = Number(strDay.substring(5,7)) - 1;
	var rDD = Number(strDay.substring(8,10));

	var currDate = new Date();
	var tDate = new Date(rYY, rMM, rDD, tHH, tMM);

	// 입력한 시간이 현재일자 시간 이전이면 false
	if ( tDate - currDate < 0 ) {
		return false;
	}
	else {
		return true;
	}
}

Javascript에서는 아래 4가지 방법을 사용하여 날짜와 시간을 표현할 수 있습니다.

new Date();
new Date(year, month, day, hours, minutes, seconds, milliseconds);
new Date(milliseconds);
new Date('date');

 

2020/03/14 - [유용한 활용팁] - Javascript post ajax를 통한 난수 쿠폰번호 인증 처리 및 테이블 행 추가 방법

 

Javascript post ajax를 통한 난수 쿠폰번호 인증 처리 및 테이블 행 추가 방법

Javascript로 post 방식으로 ajax를 통신하여 쿠폰번호 검증 후 인증이 된 쿠폰번호를 테이블의 tr를 추가하여 보여주는 방법입니다. 1. 쿠폰번호 입력 여부 점검 - 쿠폰번호가 입력 되었는지를 확인합

han288.tistory.com

2020/03/09 - [유용한 활용팁] - Javascript ajax 동기식으로 처리 후 jquery submit 처리하기 - $.when, currentTarget

 

Javascript ajax 동기식으로 처리 후 jquery submit 처리하기 - $.when, currentTarget

ajax 통신은 비동기식 통신입니다. onsubmit 이벤트에서 ajax 통신을 할 때, ajax 통신 결과와는 상관없이 submit 처리를 합니다. 그래서 async: false 와 event.preventDefault(); 로 처리를 할 수 있습니다. 이..

han288.tistory.com

2020/03/05 - [유용한 활용팁] - Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법

 

Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법

ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다. 통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다. 시간이 지연되는 서비스의 경..

han288.tistory.com

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

 

Javascript jquery submit 이벤트 시 submit 제어하기

지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다. 결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는

han288.tistory.com

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

 

Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다. 1. ajax 설정 값 중 async를 false로 설정합니다. - async: false 는 동기식 즉 절차적으로 처리를 한다는 의..

han288.tistory.com

2020/02/24 - [유용한 활용팁] - Javascript 내국인 주민등록번호 유효성 검사

 

Javascript 내국인 주민등록번호 유효성 검사

PHP가 아닌 클라이언트인 브라우저에서 Javascript로 주민등록번호 유휴성 검사를 하는 로직입니다. 외국인의 경우 별도 로직을 구성하여야 해서 내국인만 정리하였습니다. function isKorJumin(ssn1, ssn2) { var..

han288.tistory.com

2020/02/22 - [유용한 활용팁] - Javascript jQuery prop로 버튼 disabled 처리하기

 

Javascript jQuery prop로 버튼 disabled 처리하기

Form 태그 안의 버튼을 prop를 이용하여 disable 처리를 하는 방법입니다. 1. 버튼 Disabled 처리 방법 $("#btn-disabled").click(function() { alert("Disabled 처리"); $("#btn-disabled").prop("disabled", tr..

han288.tistory.com

2020/01/16 - [유용한 활용팁] - Javascript Jquery UI datepicker 한글화 하기 - datepicker-ko

 

Javascript Jquery UI datepicker 한글화 하기 - datepicker-ko

jQuery UI datepicker 한글화 하기 방법 2가지입니다. 1. 다운 받은 소스 직접 수정 하기 - jQuery UI datepicker 다운 받은 소스에서 아래 소스 코드를 이용하여 영문으로 되어 있는 부분을 한글로 변경하여 사..

han288.tistory.com

2020/01/14 - [유용한 활용팁] - Javascript one을 이용하여 keyup으로 ajax 한번만 호출하기

 

Javascript one을 이용하여 keyup으로 ajax 한번만 호출하기

프로그램에서 특정 입력 필드에서 타이핑을 치기 시작할 때 한번만 ajax 호출하는 방법입니다. $("#userName").one("keyup", function(e) { 보시는 것처럼 one을 넣어서 keyup 이벤트를 인식하게 되면 그 다음에

han288.tistory.com

2020/01/13 - [유용한 활용팁] - Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리

 

Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리

특정 시간 간격으로 생성 되어 있는 세션을 유지하는 방법입니다. 브라우저에서 자바스크립트의 setTimeout을 이용하여 타이머 셋팅을 한 후 원하는 시간이 되면 타이머를 초기화 하고 ajax로 세션

han288.tistory.com

2020/01/10 - [유용한 활용팁] - Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

 

Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

브라우저의 X 표시 또는 탭 X를 통해 종료 시킬 때 자동 로그아웃 처리하는 방법입니다. 로그아웃 이외에도 특정 작업을 하실 수 있습니다. beforeunload 이벤트를 통해서 처리가 가능합니다. beforeunl

han288.tistory.com

2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

 

JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

JavaScript로 원하는 영역에 대해서만 출력 화면 설정하기입니다. 출력을 원하는 영역에

 
로 설정을 하고, printArea() 함수를 호출하면 idPrint로 설정한 영역만 출력이 됩니다.

han288.tistory.com

2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

 

JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

form, input 태그 사용 없이 ajax 통신 시 jquery의 $.post를 이용하여 post 방식으로 데이터 전송 방법입니다. 아래는 일반적으로 사용하는 방식입니다. $.ajax({ type: 'POST', url: url, data: data, success:..

han288.tistory.com

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

 

JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

JavaScript(자바스크립트)에서 구분자를 이용하여 배열 만들기 // 구분자로 구성된 문자열 var str = "aa/bb/cc/dd/ee"; // 구분자(/)를 통해 나뉜 결과는 배열로 저장된다. var arr = str.split("/"); // 결과값..

han288.tistory.com

2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

 

JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법입니다. 1. 클릭 이벤트를 캡쳐합니다. 2. 클릭한 객체로 children를 이용하여 이미지 노드를 찾아갑니다. 3. 현재 이미지 속..

han288.tistory.com

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

 

JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

JavaScript로 input 입력값에 대한 생년월일 유효성 검사하기 1. 입력값 : YYYYMMDD 2. return 값: true / false 3. 2월 29일(윤년) 체크 function isBirthday(dateStr) { var year = Number(dateStr.substr(0,4))..

han288.tistory.com

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

 

JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

JavaScript로 Input type의 날짜를 체크하는 함수들입니다. isDate 함수 날짜 형식이 맞는지 체크하는 함수입니다. 입력값 형식은 yyyymmdd, yyyy-mm-dd, yyyy/mm/dd 3가지 사용을 할 수 있습니다. function isDat..

han288.tistory.com

 

반응형


반응형

Javascript로 post 방식으로 ajax를 통신하여 쿠폰번호 검증 후 인증이 된 쿠폰번호를 테이블의 tr를 추가하여 보여주는 방법입니다.

Javascript post ajax를 통한 난수 쿠폰번호 인증 처리 및 테이블 행 추가 방법

 

1. 쿠폰번호 입력 여부 점검

- 쿠폰번호가 입력 되었는지를 확인합니다.

 

2. 입력한 쿠폰번호 기 등록 여부 점검

- 입력한 쿠폰번호와 인증이 완료된 쿠폰번호를 비교하여 기 등록 건이 있는지 점검합니다.
- 등록된 쿠폰번호가 1건 일 때와 2건 이상일 때로 나눠서 비교를 합니다.

 

3. 쿠폰 인증 post ajax 통신

- 입력된 쿠폰 인증을 위한 ajax 통신을 하며 post방식으로 전송을 합니다.
- $.post({}).done(function(data){}).fail(function(request, status, error) {})
- $.post : POST 방식 전송
- .done() : 성공하였을 때
- .fail() : 실패하였을 때

4. 쿠폰 인증 결과에 따른 처리

- 쿠폰이 인증이 되면 기 등록된 쿠폰의 합계 금액과 결제하려는 금액을 비교합니다.
- 쿠폰의 합계 금액이 더 크면 해당 쿠폰은 등록을 하지 않습니다.

 

5. 테이블에 인증된 쿠폰 행(TR) 추가

- $('#couponResultTable > tbody:last').append(trHtml); 방식으로 행을 추가합니다.

 

6. 테이블에 있는 쿠폰 삭제하기

- 삭제 버튼 클릭 시 해당 Object를 가져옵니다.
- 현재 Object는 td안에 있습니다. 그래서 <table><tr>로 올라기 위해서 .parent().parent()를 사용합니다. - deleteCouponRow.remove(); 를 사용하여 행을 삭제합니다. - 쿠폰을 삭제하면서 쿠폰 합계 금액도 삭제한 쿠폰 금액을 차감합니다.​

 

<div class="coupon-article">
  <h4>
    <span class="sub_bar"></span>
    보험료
  </h4>
  <div class="coupon-input-section">
    <input class="insert_coupon"type="text" name="couponNo" id="couponNo" placeholder="쿠폰번호를 입력해 주세요." title="쿠폰번호 입력창" />
    <button class="update_coupon" id="authCouponBtn">적용</button>
  </div>
  <div class="coupon-result-section table-area">
    <table id="couponResultTable" class="pdt-info-tbl" class="add_class_coupon" style="display:none;">
      <tr>
        <td class="table-sub">쿠폰번호</td>
        <td style="text-align:center;">할인금액</td>
        <td style="width: 33.333%; text-align:right;"></td>
      </tr>
      <tbody></tbody>
    </table>
  </div>
</div>

<div class="selected-total-area">
  <label for="selectedTotal">결제금액</label>
  <input class="total-price" type="text" id="finalPriceSpot" name="selectedTotal" value="2500"/>원
</div>

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script type="text/javascript">
/**
 * 쿠폰 인증 처리 및 쿠폰 삭제 처리 기능 스크립트
 */

// 쿠폰 합계 금액
var totalCouponAmt = 0;

// 인증하기 버튼 클릭 시
$("#authCouponBtn").click(function() {

  // 쿠폰번호
  var couponNoObj = $("input[name='couponNo']");
  var couponNo    = couponNoObj.val();

  // 홀인원 합계 보험료
  var totalPremiumObj = $("input[name='selectedTotal']");
  var totalPremium    = Number(totalPremiumObj.val());

  // 쿠폰번호가 입력 되었는지 점검한다.
  if ( couponNo == '' ) {
    alert('쿠폰 번호를 입력하여 주세요.');
    couponNoObj.focus();
    return;
  }
  // 쿠폰번호가 입력되었다면 쿠폰번호 인증 페이지를 호출한다.
  else {

    // 쿠폰 인증 결과가 있는지 점검
    var couponRetNoObj = $("input[name='couponRetNo']");

    // 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.
    if ( couponRetNoObj.length > 0 ) {
      // 쿠폰 인증 결과가 1개일 때
      if ( couponRetNoObj.length == 1 ) {
        // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
        couponRetNo = couponRetNoObj.val();
        if ( couponNo == couponRetNo ) {
          alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
          return;
        }
      } // End if ( couponRetNoObj.length == 1 ) 쿠폰 인증 결과가 1개일 때
      // 쿠폰 인증 결과가 2개 이상일 때
      else {
        for (var i = 0; i < couponRetNoObj.length; i++)
        {
          // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
          couponRetNo = $(couponRetNoObj[i]).val();
          if ( couponNo == couponRetNo ) {
            alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
            return;
          }
        } // End for (var i = 0; i < couponRetNoObj.length; i++)
      } // End else 쿠폰 인증 결과가 2개 이상일 때
    } //End if ( couponRetNoObj.length > 0 ) 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.


    // Post 방식으로 호출을 한다.
    $.post("쿠폰 인증 URL", {
        couponNo : couponNo
    }, 'json' /* xml, text, script, html */)
    .done(function(data) {

      var message = data.message;
      if ( message == 'Success' ) {
        // 인증이 정상적으로 되었으면 쿠폰번호와 쿠폰 금액을 셋팅한다.
        var cpn_no  = data.cpn_no;
        var cpn_amt = data.cpn_amt;
        totalCouponAmt += Number(cpn_amt);

        // 쿠폰 인증 결과 테이블이 display none 일때만 show 처리를 한다.
        if($("#couponResultTable").css("display") == "none")
        {
          $("#couponResultTable").show();
        }

        // 홀인원 합계 보험료보다 쿠폰 합계 금액이 크면 더 추가하지 않는다.
        if ( totalCouponAmt > totalPremium ) {
          alert('합계 보험료보다 쿠폰 합계 금액이 클 수 없습니다.');
          return;
        }

        var trHtml;
        trHtml += "<tr>";
        trHtml += "  <td class=\"table-sub\" >"+cpn_no+"</td>";
        trHtml += "  <td style=\"text-align:center;\">"+cpn_amt+"원</td>";
        trHtml += "  <td style=\"width: 33.333%; text-align:right;\">";
        trHtml += "    <button class=\"deleteCouponBtn\" onclick=\"deleteCoupon(this)\">삭제</button>";
        trHtml += "    <input type=\"hidden\" name=\"couponRetNo\" value=\""+cpn_no+"\">";
        trHtml += "    <input type=\"hidden\" name=\"couponRetAmt\" value=\""+cpn_amt+"\">";
        trHtml += "  </td>";
        trHtml += "</tr>";

        // 테이블의 행을 추가한다.
        $('#couponResultTable > tbody:last').append(trHtml);
      }
      else {
        alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
        return;
      }
    })
    .fail(function(request, status, error) {
      console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
      alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
    });
  }
});

// 삭제하기 버튼 클릭 시
function deleteCoupon(obj)
{
  // 삭제할 쿠폰 TR
  var deleteCouponRow = $(obj).parent().parent();

  // 차감할 쿠폰 금액
  var deleteCouponRetAmtObj = $(obj).next().next();
  var deleteCouponRetAmt = Number(deleteCouponRetAmtObj.val());

  // 지우는 쿠폰 금액을 쿠폰 합계에서 빼준다.
  totalCouponAmt -= deleteCouponRetAmt;

  // 쿠폰 입력 줄을 삭제한다.
  deleteCouponRow.remove();
}
</script>
반응형


반응형

ajax 통신은 비동기식 통신입니다.

onsubmit 이벤트에서 ajax 통신을 할 때, ajax 통신 결과와는 상관없이 submit 처리를 합니다.

그래서 async: false 와 event.preventDefault(); 로 처리를 할 수 있습니다.

이렇게 하게 하면 ajax 통신 결과 리턴 시간이 지연 될 것을 감안하여 올리는 로딩바가 구현이 되지 않습니다.

이 경우에는 로딩바를 먼저 노출되도록 처리를 하고 ajax 통신을 setTimeout과 결합하여 사용하면 로딩바가 나오게 됩니다.

최종적으로 ajax 통신 결과가 성공 일 때 submit이 안되는 현상이 발생을 하였습니다.

이 현상의 해법은 $.when($.ajax()).done().fail()과 currentTarget.submit()입니다.

며칠 동안 포스팅 했던 내용의 완결판입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

    // ajax 통신을 설정합니다.
     var when =
   		$.ajax({
   			url:'[주소]',
   			type:'post',
   			data:$('form').serialize(),
   			dataType:'json'
   		});

      // 로딩바를 보여 준다.
    	$('#loadimg').css('display','block');
      
      $.when(when)
    	.done(function(data)
    	{
    		var message = data.message;
    		if ( message == 'Success' )
    		{
    			//console.log('success');
          // 성공일 때 form submit을 합니다.
    			event.currentTarget.submit();
    		}
    		else
    		{
    			// 안내 메시지를 보여준다.
    			alert('안내 메시지');
    			// 에러가 발생하면 모달창을 닫는다.
    			$('#모달창 id').modal('hide');
    		}
    	})
    	.fail(function(request, status, error)
    	{
        // 통신 실패하였을 때
    		console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    
    		// 안내 메시지를 보여준다.
    		alert('안내 메시지');
    		// 에러가 발생하면 모달창을 닫는다.
    		$('#모달창 id').modal('hide');
    	})
    	.always(function (data, status, responseObj)
    	{
        // 성공 실패와 상관 없이 항상 처리를 하는 내용을 담습니다.
    		//console.log(data);
    
    		// 로딩바를 해제한다.
    		$('#loadimg').css('display','none');
    	});
    
    })
  </script>
  
</body>
</html>

Javascript ajax 동기식으로 처리 후 jquery submit 처리하기

2020/03/05 - [유용한 활용팁] - Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법.

 

Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법

ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다. 통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다. 시간이 지연되는 서비스의 경..

han288.tistory.com

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

 

Javascript jquery submit 이벤트 시 submit 제어하기

지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다. 결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는 버그를..

han288.tistory.com

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

 

Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다. 1. ajax 설정 값 중 async를 false로 설정합니다. - async: false 는 동기식 즉 절차적으로 처리를 한다는 의..

han288.tistory.com

 

반응형


반응형

ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다.

통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다.

 

시간이 지연되는 서비스의 경우 로딩바 없이 현재 화면을 보고 있어야 하는 현상이 생깁니다.

ajax async: false (동기식) 처리 시 로딩바 구현 방법입니다.

1. ajax 호출 전 로딩바를 먼저 호출합니다.
2. setTimeout을 호출 후 ajax 로 진입하게 합니다.
3. ajax를 async: false로 비동기식 통신을 합니다.
4. 통신이 끝나면 complete:function()로 로딩바를 해제합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

     // 로딩바를 보여 준다.
   	$('#loadimg').css('display','block');
   
   	setTimeout(function() {

    	$.ajax({
    		url:'[주소]',
    		type:'post',
    		data:$('form').serialize(),
    		dataType:'json',

    		// 다른 페이지를 처리 후에 결과가 성공일 때
    		// 비동기식으로 처리를 함
    		async: false,
    		success:function(data)
    		{
          var message = data.message;
    
          // 결과값이 성공이면 전송 여부는 true
          if ( message == 'Success' ) {
    			}
    			else {
    			}
    		},
    		error:function(request, status, error)
    		{ // 오류가 발생했을 때 호출된다.
    			console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    		},
    		complete:function()
    		{
    			// 로딩바를 해제한다.
          $('#loadimg').css('display','none');
    		}
    	});
    }) // End $.ajax(
  }, 0); // End setTimeout(function()
</script>
  
</body>
</html>

 

Javascript ajax async : false (동기식) 처리 시 로딩바 구현 방법

 

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

 

Javascript jquery submit 이벤트 시 submit 제어하기

지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다. 결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는 버그를..

han288.tistory.com

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

 

Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다. 1. ajax 설정 값 중 async를 false로 설정합니다. - async: false 는 동기식 즉 절차적으로 처리를 한다는 의..

han288.tistory.com

 

반응형

+ Recent posts