고수님들 도와주세요...
본문
아래소스는 게시판을 변형해서 여분필드 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)
콘솔로그로 확인해보세요 값이 있는지 없는지..
console.log(imgData); 는 없네요. script 를 만들어 야 하나요?
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를 줘야되요
알려주신 데로 해 보았으나, 제가 무언가 실수를 한 것인지 제대로 작동을 안하네요.
천천히 다시 처음부터 해본 후에 메세지 남길게요..
적극적으로 도움을 주셔서... 감사합니다.^^
fun_submit 함수 내부에서 저거 그대로 넣으셔서 하면되요
답변을 작성하시기 전에 로그인 해주세요.