고수님들 도와주세요...

고수님들 도와주세요...

QA

고수님들 도와주세요...

본문

아래소스는 게시판을 변형해서 여분필드 wr_1 에 txt 대신 서명을 받아서 wr_1 필드에 이미지로 저장하는일종의 서명 소스입니다. 
출처는   https://sir.kr/g5_skin/11807?sfl=wr_subject%7C%7Cwr_content&stx=%EC%84%9C%EB%AA%85 
입니다. 
그런데 문제는 required가 작동 안핟는 겁니다. 물론 <input type="hidden"... > 이것 때문에 작동 안하다는건 알겠는데, 혹시라도 다른 우회방법으로 할 수 있을지 않을까 해서 질문 드립니다..

 

 


<?php if($write['wr_1']) { ?>
<br>
<img src="<?php echo $write['wr_1'] ?>">
<?php } ?>
<input type="hidden" name="wr_1" required="required" value="<?php echo $write['wr_1'] ?>" class="form-control input-sm" required />
<div id="wr_1"></div>
<div data-role="page">
    <div data-role="popup" id="divPopUpSignContract">
        <div class="ui-content popUpHeight">
            <div id="div_signcontract">
                <canvas id="canvas">Canvas is not supported</canvas>
                <div>
                    <input id="btnClearSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="a" value="서명시작/지우기" onclick="init_Sign_Canvas()" />
                    <input id="btnSubmitSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="a" value="서명확인" onclick="fun_submit()" validate />
                    <label id="page" data-role="content"></label>
                    <div class="h30"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
var isSign = false;
var leftMButtonDown = false;
jQuery(function() {
    //Initialize sign pad
    init_Sign_Canvas();
});
function fun_submit() {
    if (isSign) {
        var canvas = $("#canvas").get(0);
        var imgData = canvas.toDataURL();
        jQuery('#page').find('p').remove();
        jQuery('#page').find('img').remove();
        jQuery('#page').append(jQuery('<p>위의 서명날인을 사용합니다.</p>'));
        jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value', imgData));
        closePopUp();
    } else {
        alert('성명(회사) 서명해주세요');
    }
}
function closePopUp() {
    jQuery('#divPopUpSignContract').popup('close');
    jQuery('#divPopUpSignContract').popup('close');
}
function init_Sign_Canvas() {
    isSign = false;
    leftMButtonDown = false;
    //Set Canvas width
    var sizedWindowWidth = $(window).width();
    if (sizedWindowWidth > 700)
        sizedWindowWidth = $(window).width() / 2;
    else if (sizedWindowWidth > 400)
        sizedWindowWidth = sizedWindowWidth - 100;
    else
        sizedWindowWidth = sizedWindowWidth - 50;
    //$("#canvas").width(sizedWindowWidth);
    $("#canvas").width(283);
    $("#canvas").height(80);
    $("#canvas").css("border", "1px solid #add8e6");
    var canvas = $("#canvas").get(0);
    canvasContext = canvas.getContext('2d');
    if (canvasContext) {
        //canvasContext.canvas.width  = sizedWindowWidth;
        canvasContext.canvas.width = 283;
        canvasContext.canvas.height = 80;
        // canvasContext.fillStyle = "#e3f0f5";
        canvasContext.fillStyle = "transparent";
        canvasContext.fillRect(0, 0, sizedWindowWidth, 200);
        canvasContext.moveTo(50, 150);
        canvasContext.lineTo(sizedWindowWidth - 50, 150);
        canvasContext.stroke();
        canvasContext.fillStyle = "#000";
        canvasContext.font = "20px Arial";
        canvasContext.fillText("x", 40, 155);
    }
    // Bind Mouse events
    $(canvas).on('mousedown', function(e) {
        if (e.which === 1) {
            leftMButtonDown = true;
            canvasContext.fillStyle = "#000";
            var x = e.pageX - $(e.target).offset().left;
            var y = e.pageY - $(e.target).offset().top;
            canvasContext.moveTo(x, y);
        }
        e.preventDefault();
        return false;
    });
    $(canvas).on('mouseup', function(e) {
        if (leftMButtonDown && e.which === 1) {
            leftMButtonDown = false;
            isSign = true;
        }
        e.preventDefault();
        return false;
    });
    // draw a line from the last point to this one
    $(canvas).on('mousemove', function(e) {
        if (leftMButtonDown == true) {
            canvasContext.fillStyle = "#000";
            var x = e.pageX - $(e.target).offset().left;
            var y = e.pageY - $(e.target).offset().top;
            canvasContext.lineTo(x, y);
            canvasContext.stroke();
        }
        e.preventDefault();
        return false;
    });
    //bind touch events
    $(canvas).on('touchstart', function(e) {
        leftMButtonDown = true;
        canvasContext.fillStyle = "#000";
        var t = e.originalEvent.touches[0];
        var x = t.pageX - $(e.target).offset().left;
        var y = t.pageY - $(e.target).offset().top;
        canvasContext.moveTo(x, y);
        e.preventDefault();
        return false;
    });
    $(canvas).on('touchmove', function(e) {
        canvasContext.fillStyle = "#000";
        var t = e.originalEvent.touches[0];
        var x = t.pageX - $(e.target).offset().left;
        var y = t.pageY - $(e.target).offset().top;
        canvasContext.lineTo(x, y);
        canvasContext.stroke();
        e.preventDefault();
        return false;
    });
    $(canvas).on('touchend', function(e) {
        if (leftMButtonDown) {
            leftMButtonDown = false;
            isSign = true;
        }
    });
}
</script>

 

 

또, 

어떤 분은 아래처럼

 


<script>
function fun_submit() {
    if (isSign) {
        var canvas = $("#canvas").get(0);
        var imgData = canvas.toDataURL();
        jQuery('#page').find('p').remove();
        jQuery('#page').find('img').remove();
        jQuery('#page').append(jQuery('<p>아래의 서명날인을 사용합니다.</p>'));
        jQuery('#wr_5').append($('<input type="hidden" name="wr_5" class="form-control input-sm">').attr('value', imgData));
        closePopUp();
    } else {
        alert('서명해주세요');
        event.preventDefault();
    }
}
</script>

 

요렇게 하면 된다고 하시던데... 전혀 작동을 안하더라구요.. 고수님들 의견 을 듣고 싶습니다.

이 질문에 댓글 쓰기 :

답변 2

인풋이 히든 타입으로 됐다고해도 리콰이어는 동작될건데요 

   event.preventDefault(); 이거 빼시고

console.log(imgData)

콘솔로그로 확인해보세요 값이 있는지 없는지..


if($('#wr_1').val() == "")  {
  alert('서명해주세요');
  return false;
}else {
var canvas = $("#canvas").get(0); var imgData = canvas.toDataURL(); jQuery('#page').find('p').remove(); jQuery('#page').find('img').remove(); jQuery('#page').append(jQuery('<p>아래의 서명날인을 사용합니다.</p>')); jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value', imgData)); closePopUp();
}

 

이렇게 해보세요

꼭 input에다가 id를 wr_1로 지정 해주세요 

여기 wr_1은 여분필드인데 여분필드는 알아서 응용해서 1이든 5이든간에 하고싶은걸로 쓰셔서

id를 줘야되요 

 

 

알려주신 데로 해 보았으나, 제가 무언가 실수를 한 것인지 제대로 작동을 안하네요.
천천히 다시 처음부터 해본 후에 메세지 남길게요.. 
적극적으로 도움을 주셔서... 감사합니다.^^

답변을 작성하시기 전에 로그인 해주세요.
전체 393
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT