늘어나고 줄어드는 유동적인 데이터를 DB에 집어넣기

정리~~~~

 

 

+ 입력 받은 재료만 새로 카운트 해서 name 부여하고 집어넣기 위해 아래와 같이 코드를 짰었는데 지금 갑자기 에러가 난다.

기본적으로 만들어놓은 3칸 중 1칸만 입력하고 등록하려 하니 값을 못찾는다고 에러가 떴음.

//재료의 개수 세기 (빈 칸 제외)
var mc = $("li").length;
for(var i=0; i<mc; i++) {
    for(var j=0; j<($("li").eq(i).children("input").length)-1; j++){
        if($("li").eq(i).children("input").eq(j).val() == ""
                || $("li").eq(i).children("input").eq(j+1).val() == "") {
        mc--;							
        } else {
            //재료의 name 새로 붙여주기
            $("li").eq(i).children("input").eq(j).attr("name", "matNm"+i);
            $("li").eq(i).children("input").eq(j+1).attr("name", "matQt"+i);
        }
    }
}
$("#matCnt").val(mc);

다른 데에서 엉킨 거일 수도 있지만 이 코드를 다시 생각해보니 값이 없는 요소들에 대해 name을 뺏었어야 하는 것 같아서 수정하기로 함.

 

수정 버전

//재료의 개수 세기 (빈 칸 제외)
var mc = $("li").length;
for(var i=0; i<mc; i++) {
    for(var j=0; j<($("li").eq(i).children("input").length)-1; j++){
        if($("li").eq(i).children("input").eq(j).val() == ""
                || $("li").eq(i).children("input").eq(j+1).val() == "") {
            //빈 칸은 name을 뺏기
            $("li").eq(i).children("input").eq(j).removeAttr("name");
            $("li").eq(i).children("input").eq(j+1).removeAttr("name");
            mc--;							
        } else {
            //입력한 재료의 name 새로 붙여주기
            $("li").eq(i).children("input").eq(j).attr("name", "matNm"+i);
            $("li").eq(i).children("input").eq(j+1).attr("name", "matQt"+i);
        }
    }
}
$("#matCnt").val(mc);

 

근데!!! 그런데도 계속 같은 에러가 떴다.

DB 확인해보면 데이터는 잘 들어왔는데.. 알 수가 없다..

 

 

+ 재료 입력 칸에서

이름만 입력하고 양은 입력하지 않는 경우나 양을 입력하고 이름을 입력하지 않았을 때

그 상태로 등록하지 못하게 막고 싶은데(어차피 에러남) 입력 칸이 많다보니 각각 지정하기가 난감했다.

그래서 this를 사용하고 싶었는데 이렇게 찾아보니 this는 그렇게 사용할 수가 없었음...

(this 사용법 -> https://60cod.tistory.com/321)

 

그래서 if문 안에 또 for문 돌려서 필터를 걸어줬다.

 

//등록 버튼 클릭 시
} else if($("#material").children().children("input").first().val() == ""
            && $("#material").children().children("input").first().next().val() == "") {
    //재료 아무것도 입력 안 했을 때
    $("#mNotice").show();
    $("#material").children().children("input").first().focus();
} else if($("li").length > 0) {
    for(var i=0; i<$("li").length; i++){
        if($("li").eq(i).children("input").eq(0).val() != "" 
                && $("li").eq(i).children("input").eq(1).val() == "") {
            //이름만 입력했을 때
            $("#mqNotice").show();
            $("li").eq(i).children("input").eq(1).focus();
        } else if($("li").eq(i).children("input").eq(0).val() == "" 
                && $("li").eq(i).children("input").eq(1).val() != "") {
            //양만 입력했을 때
            $("#mnNotice").show();
            $("li").eq(i).children("input").eq(0).focus();
        }
    }
}

//경고 메시지 사라지기
$("#material").on("keydown", "input", function(){
    $("#mNotice").hide();
});
$(".left_mat").on("keydown", function(){
    $("#mnNotice").hide();
});
$(".right_mat").on("keydown", function(){
    $("#mqNotice").hide();
});

<!-- HTML -->
<li id="recipeMat1" class="recipe_mat">
    <input type="text" name="matNm1" id="matNm1" 
       class="left_mat" placeholder="예) 김치"/>
    <input type="text" name="matQt1" id="matQt1" 
       class="right_mat" placeholder="예) 200g"/>
    <span class="list_del_btn" id="recipeMatDel1" 
       onclick="delMaterial(1)">
    </span>
</li>

이름을 입력 안 했을 때

양을 입력 안 했을 때

 

+ 근데 등록하려니 아무 반응 없이 등록 안 된 상태로 화면이 멈춰버린다.

그래서 생각해보니 필터를 걸 때.. else if 안에 for문을 돌리겠다고 else if 조건을 무조건 걸리는 조건을 줬더니 거기 걸려서 멈춰버린 거다. 근데 그 안에서 for문 돌고도 문제가 없으니 아무 메시지도 안 뜬 거고..

그래서 아예 메서드를 새로 만들어서 false를 반환하는 경우에 대해 필터를 걸기로 했다.

} else if($("#material").children().children("input").first().val() == ""
            && $("#material").children().children("input").first().next().val() == "") {
    $("#mNotice").show();
    $("#material").children().children("input").first().focus();
} else if(checkInsertMat($("li").length) == false) {
    //else if 걸리면 그냥 걸리고 멈추니 내용 따로 안 써도 되는 듯
}

function checkInsertMat(lc) {
	for(var i=0; i<lc; i++){
		if($("li").eq(i).children("input").eq(0).val() != "" 
				&& $("li").eq(i).children("input").eq(1).val() == "") {
			$("#mqNotice").show();
			$("li").eq(i).children("input").eq(1).focus();
			return false;
		} else if($("li").eq(i).children("input").eq(0).val() == "" 
				&& $("li").eq(i).children("input").eq(1).val() != "") {
			$("#mnNotice").show();
			$("li").eq(i).children("input").eq(0).focus();
			return false;
		}
	}
}

해결!