jQuery input box 동적 추가 삭제

 2019.08.16

 

 jQuery를 이용하여 버튼 클릭시 input box 추가 삭제

 

 

 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#all').click(function(){
                let allCheck = $(this).is(':checked');
                if(allCheck) $('.checks').prop('checked',true);
                else $('.checks').prop('checked',false);
            });
            
            $('#okBtn').click(function(){
                let checksLength = $('.checks:checked').length;
                if(checksLength == 3) {
                    alert('완료');
                } else {
                    alert('비완료');
                }
            });
            
            /* 아이디 정규식 확인 */
            $('#memberId').change(function(){
                var regType1 = /^[A-Za-z0-9+]{4,12}$/;
                if (!regType1.test($('#memberId').val())) {
                     alert("아이디는 영문 혹은 숫자 조합 4~12 글자로 구성해야 합니다");
                }
            });
 
            
            /* 추가버튼 클릭시 이메일 폼 추가  */
            $(document).on('click','.trCopy',function(){
                var clone = $(this).parents('tr').clone();
                clone.find('input').val(''); // input box 내용 초기화
                $('table').append(clone);
            });
            
            /* 추가버튼 클릭시 이메일 폼 제거 */
            $(document).on('click','.trDel',function(){
                var formLength = $('.trDel').length;
                if(formLength > 1){
                    $(this).parents('tr').remove();
                } else {
                    alert ('더이상 삭제 불가능!');
                }
                
            });
            
            /* 폼 데이터 확인 */
            $('#tableBtn').click(function() {
                var memberId = $('#memberId');
                var memberPw = $('#memberPw');
                var memberPwCheck = $('#memberPwCheck');
                var memberEmail = $('.memberEmail');
                
                if(memberId.val() == ''){
                    alert('아이디를 입력하세요');
                    memberId.focus();
                    return false;
                } else if(memberPw.val() == ''){
                    alert('비밀번호를 입력하세요');
                    memberPw.focus();
                    return false;
                    
                } else if(memberPw.val() != '' && memberPw.val() != memberPwCheck.val()) {
                    memberPwCheck.focus();
                    return false;
                }
                
                var isNext = true;
                memberEmail.each(function() {
                    if($(this).val() == ''){
                        isNext = false;
                        return false;
                    }
                });
                
                if(!isNext){
                    alert('입력되지 않은 이메일이 있습니다');
                    return false;
                }
            })
        });
    /script>