개발 Q&A

제목 form 전송 전 ajax로 check하여 필드에 값을 주려고 하는데 잘 안되어 글을 올리게 되었습니다.
카테고리 JavaScript
글쓴이 정수리 작성시각 2016/12/13 14:00:10
댓글 : 4 추천 : 0 스크랩 : 0 조회수 : 12892   RSS

이러한 기능을 만들려고 합니다. 

전화접수대장이라는 곳에 데이터를 등록을 할때 

기관명에 기관을 입력하고 등록 버튼을 누르면 

기존에 등록이 되어 있지 않는 기관이라면 

'등록되지 않은 기관 입니다. 등록 하시겠습니까?' 

라는 팝업창이 뜨고 예/아니오에 따라 input[name='confirm'] 이라는 필드에 1 또는 0이라는값을 줄려고 합니다. 

폼을 전송전에 jquery로 필드마다 빈칸 유무를 확인하며 

기관명 필드에서도 유무를 확인하고 있을 경우 ajax를 통해 등록되어 있는 기관인지 아닌 지를 확인한 후 

form을 전송할려고 하는데 전송버튼을 누르면 ajax통신을 하지않고 바로 넘어가 버리더라구요;; 

그전에는 기관명에 한글자를 입력하면 autocomplete를 통해 하단에 기관이 출력이 되고 출력된 기관들중 

클릭하면 등록되어 있는 기관인지 유무를 판단하였는데 

회사에서 기능을 잘못되었다고 다시 수정해달라고해서 수정하고 있는데 현재의 경우는 autocomplete를 통해 

하단에 출력되는 기관들을 검사하는 거이 아닌 직접 입력한 기관을 확인하여 등록된 기관인지 미등록된 기관인지 

확인을하여야 합니다. 

어떻게 해야 제가 원하는 기능을 만들수 있을까요?

 

//서브밋 안에 넣어뒀을 경우 ajax 통신을 하지 않아 ajax통신 부분을 따로 함수로 만든 후 테스트를 해보았는데도 ajax통신을 안하고 바로 넘겨버리더라구요 
//submit 에 return false를 주어 넘어 가는것을 막고 테스트를 하면 ajax통신을 하는데 무한으로 데이터르 주고 받아 버리는 현상이 있구요 
 
$('#tel_regit').submit(function(){
    var action =urlinfo()+'/tel_c/tel_regit';
    if($('input[name="Tuser"]').val()==''){
        alert('접수자명을 입력해주세요');
        $('input[name="Tuser"]').focus();
        return false;
    }
    if($('input[name="Tname"]').val()==''){
        alert('고객명을 입력해주세요');
        $('input[name="Tname"]').focus();
        return false;
    }
    if($('input[name="Tphone"]').val()==''){
        alert('연락처를 입력해주세요');
        $('input[name="Tphone"]').focus();
        return false;
    }
    if($('textarea[name="Tmemo_a"]').val()==''){
        alert('문의내용을 입력해주세요');
        $('textarea[name="Tmemo_a"]').focus();
        return false;
    }
     
    if($('input[name="Trctype"]').is(':checked')== false){
 
      alert('접수구분을 체크해주세요');
      return false;
    }
 
      if($('input[name="Tcom"]').val()==''){
 
        alert('기관을 입력해주세요');
        return false;
      }else{
           
        confirm($('input[name="Tcom"]').val());
        return false;
      }
  });
 
 
function confirm(name){ 
          var test = name;
            $.ajax({//등록된 기관인지 아닌지 검증
            type:'post',
            url:urlinfo()+'tel_c/gg_confirm',
            dataType:'json',
            data:{
              Tcom:test
            },
            success:function(data){
                if(data.result == 0){
                  var check  = confirm('등록되지 않은 기관입니다. 등록하시겠습니까?');
                    if(check){
                      $('input[name="confrim"]').val('');
                      $('input[name="confrim"]').val('1');
                    }else{
                      $('input[name="confrim"]').val('');
                      $('input[name="confrim"]').val('0');
                    }
                }else{
                    $('input[name="confrim"]').val('');
                    $('input[name="confrim"]').val('0');
                }
              },
              errorr:function(status, request, error){
                alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error"+error);
              }
          });
           
    }

 

 다음글 우분투 curl 버전 업데이트 하는 방법 알고 계시나요... (2)
 이전글 특정페이지에서 수정 후 창을 리로드 했을 경우 Perm... (1)

댓글

뫄뫄잉뿌 / 2016/12/13 14:24:29 / 추천 0
전송버튼을 ajax 함수로 보내고 빈칸 확인은 ajax 위에, submit은 ajax success 안에 넣어보세요~
정수리 / 2016/12/13 17:14:38 / 추천 0

@뫄뫄잉뿌

답변감사합니다 말씀 하신 것처럼

$('button[name="regit"]').click(function(){
		

			if($('input[name="Tuser"]').val()==''){
				alert('접수자명을 입력해주세요');
				$('input[name="Tuser"]').focus();
				return false;
		}
		
		if($('input[name="Tphone"]').val()==''){
				alert('연락처를 입력해주세요');
				$('input[name="Tphone"]').focus();
				return false;
		}
		if($('textarea[name="Tmemo_a"]').val()==''){
				alert('문의내용을 입력해주세요');
				$('textarea[name="Tmemo_a"]').focus();
				return false;
		}
		
		if($('input[name="Trctype"]').is(':checked')== false){

			alert('접수구분을 체크해주세요');
			return false;
		}
		var test=$('input[name="Tcom"]').val();
		
		if(test == ''){
				alert('기관명을 입력해주세요');
				$('input[name="Tcom"]').focus();
				return false;

		}else{

			$.ajax({//등록된 기관인지 아닌지 검증
							type:'post',
							url:urlinfo()+'tel_c/gg_confirm',
							dataType:'json',
							data:{
								Tcom:test
							},
							success:function(data){
									if(data.result == 0){
										var check  = confirm('등록되지 않은 기관입니다. 등록하시겠습니까?');
											if(check){
												$('input[name="confrim"]').val('');
												$('input[name="confrim"]').val('1');
												
											}else{
												$('input[name="confrim"]').val('');
												$('input[name="confrim"]').val('0');
												
											}
									}else{
											$('input[name="confrim"]').val('');
											$('input[name="confrim"]').val('0');
									}
							              $('#tel_regit').submit();
								},
								errorr:function(status, request, error){
									alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error"+error);
								}
						});
				}	
				
	});

이렇게 바꾸지 잘되네요 ㅎㅎ

그런데 문제 ㅜㅜ 이거 말고도 담당자의 이름도 위와 같이 비슷한 형태로 등록이 되어 있는지 미등록인지 확인해야되서 

$('button[name="regit"]').click(function(){
		

			if($('input[name="Tuser"]').val()==''){
				alert('접수자명을 입력해주세요');
				$('input[name="Tuser"]').focus();
				return false;
		}
		
		if($('input[name="Tphone"]').val()==''){
				alert('연락처를 입력해주세요');
				$('input[name="Tphone"]').focus();
				return false;
		}
		if($('textarea[name="Tmemo_a"]').val()==''){
				alert('문의내용을 입력해주세요');
				$('textarea[name="Tmemo_a"]').focus();
				return false;
		}
		
		if($('input[name="Trctype"]').is(':checked')== false){

			alert('접수구분을 체크해주세요');
			return false;
		}
		var test=$('input[name="Tcom"]').val();
		
		if(test == ''){
				alert('기관명을 입력해주세요');
				$('input[name="Tcom"]').focus();
				return false;

		}else{

			$.ajax({//등록된 기관인지 아닌지 검증
							type:'post',
							url:urlinfo()+'tel_c/gg_confirm',
							dataType:'json',
							data:{
								Tcom:test
							},
							success:function(data){
									if(data.result == 0){
										var check  = confirm('등록되지 않은 기관입니다. 등록하시겠습니까?');
											if(check){
												$('input[name="confrim"]').val('');
												$('input[name="confrim"]').val('1');
												
											}else{
												$('input[name="confrim"]').val('');
												$('input[name="confrim"]').val('0');
												
											}
									}else{
											$('input[name="confrim"]').val('');
											$('input[name="confrim"]').val('0');
									}
//									$('#tel_regit').submit();
								},
								errorr:function(status, request, error){
									alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error"+error);
								}
						});
				}	

				if($('input[name="Tname"]').val()==''){
					alert('고객명을 입력해주세요');
					$('input[name="Tname"]').focus();
					return false;
				}else{
						var mn_name = $('input[name="Tname"]').val();
						var gg_name = $('input[name="Tcom"]').val();
					$.ajax({//
							type:'post',
							url:urlinfo()+'tel_c/mn_confirm',
							dataType:'json',
							data:{
								mn_name:mn_name,
								gg_name:gg_name
							},
							success:function(data){
									if(data == 0){
										var check  = confirm('등록되지 않은 담당자입니다. 등록하시겠습니까?');
											if(check){
												$('input[name="mnfrim"]').val('');
												$('input[name="mnfrim"]').val('1');
												
											}else{
												$('input[name="mnfrim"]').val('');
												$('input[name="mnfrim"]').val('0');
												
											}
									}else{
											$('input[name="mnfrim"]').val('');
											$('input[name="mnfrim"]').val('0');
									}
							
								},
								errorr:function(status, request, error){
									alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error"+error);
								}
						});
				}
				$('#tel_regit').submit();
	});

이렇게 바꾼후에 실행해보니 ajax통신을 안하고 바로 넘어가버리네요 ㅜㅜ 다시 원점이 된느낌이네요ㅜㅜ

뫄뫄잉뿌 / 2016/12/14 09:09:50 / 추천 0

두번 갈 필요없이 한번에 보내도 되지 않을까요.. ㅎㅎ 빈칸 확인은 모두 ajax 전에 확인하고, ajax 한번 보낼때 두 정보를 보내 리턴받는 코드를 식별화하면 될거같아요~

예)

0 리턴 -> 등록되지 않은 기관, 등록되지 않은 담당자

1 리턴 -> 등록되지 않은 기관, 등록된 담당자

2 리턴 -> 등록된 기관, 등록되지 않은 담당자

3 리턴 -> 등록된 기관, 등록된 담당자

이런식으로요 ~

정수리 / 2016/12/14 13:24:28 / 추천 0

@뫄뫄잉뿌

와 대단하십니다...

정말감사해요 ㅜㅜ 말씀하신대로

리턴값을 다르게 하여 처리하였더니... 쉽게 해결이되네요 

언제나 쉽게 생각할수도 있는 것을 

전 언제나 어렵게 생각하는 재주가 있는 것 같아요 ...