[JavaScript] Form Input Box에 , 자동 생성 기능 개발

input form에 숫자 관련 금액을 입, 출금하기 위해 숫자를 입력할 시, 자동으로 콤마(,)를 생성하는 기능을 개발하고자 합니다.

먼저 Input box에 콤마를 찍어주기 위한 정규식을 기반으로 한 자바스크립트 함수를 제작한다.

<script>
    function inputNumberFormat(obj) {
    obj.value = comma(uncomma(obj.value));
    }

    function comma(str) {
        str = String(str);
        return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }

    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    }
</script>

 

콤마를 찍기 위한 대표적인 방식은 .toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') 이다.

 

콤마 생성을 위한 함수는 https://mi-nya.tistory.com/248 님의 블로그를 참고했습니다ㅎㅎ

 

그 후, Form의 Input에 value="" onkeyup="inputNumberFormat(this)"를 추가하여 주었다.

 

이 방식을 적용하니, Form의 Input Box에 숫자를 입력하면 자동으로 콤마가 생성이 되었다!!

 

하지만... 이 방식을 통해 진행했을 시, let queryString = $("form[name=exchangeSendForm]").serialize()

이와 같이 .serialize()를 사용해서 폼을 전송하려 하니 API에서 500 에러가 난다. 

아마도 콤마(,) 값이 '%2c'로 읽히는 것 같다..

즉, 10,000을 입력하면 10%2c000 이렇게 읽혀 값을 제대로 받아올 수 없기에 발생하는 문제인 것 같다.

 

이를 해결하기 위해 .serialize()를 하기 전 Form에서의 콤마(,) 제거 방식을 활용한다면 해결할 수 있을 것이라 생각되어 (,) 제거를 진행했다.

 

Form에서의 콤마(,) 제거 방식은 https://pjsprogram.tistory.com/48  님의 블로그를 참고했다!!

var targetForm = $("#exchangeSendForm:input");

$.each(targetForm, function(index, elem){

      $(this).val($(this).val().replace(/,/g, ''));

});

var frm = $("#exchangeSendForm").serialize();

이를 이용하여 Form을 .serialize() 전 replace를 통한 콤마(,) 제거를 진행하니 API 폼 전송이 정상적으로 되었다!!

 

여기서 사용된 콤마를 제거하기 위한 대표적인 방법은 .replace(/,/g, '')); 이고 여기서 g를 제거한다면 콤마가 여러 개라면 제일 처음의 콤마만 제거됨으로 g를 붙여줘야 text의 안의 모든 콤마를 제거할 수 있다!! 

 

이렇게 또 하나를 배워간다ㅎㅎ