고수님들 도와주세요... 채택완료
꽁치입니다
3년 전
조회 4,993
아래소스는 게시판을 변형해서 여분필드 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"... > 이것 때문에 작동 안하다는건 알겠는데, 혹시라도 다른 우회방법으로 할 수 있을지 않을까 해서 질문 드립니다..
</p>
<p><?php if($write['wr_1']) { ?>
<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></p>
<p>
<script type="text/javascript">
var isSign = false;
var leftMButtonDown = false;</p>
<p>jQuery(function() {
//Initialize sign pad
init_Sign_Canvas();
});</p>
<p>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));</p>
<p> closePopUp();
} else {
alert('성명(회사) 서명해주세요');
}
}</p>
<p>function closePopUp() {
jQuery('#divPopUpSignContract').popup('close');
jQuery('#divPopUpSignContract').popup('close');
}</p>
<p>function init_Sign_Canvas() {
isSign = false;
leftMButtonDown = false;</p>
<p> //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;</p>
<p> //$("#canvas").width(sizedWindowWidth);
$("#canvas").width(283);
$("#canvas").height(80);
$("#canvas").css("border", "1px solid #add8e6");</p>
<p> var canvas = $("#canvas").get(0);</p>
<p> canvasContext = canvas.getContext('2d');</p>
<p> if (canvasContext) {
//canvasContext.canvas.width = sizedWindowWidth;
canvasContext.canvas.width = 283;
canvasContext.canvas.height = 80;</p>
<p> // canvasContext.fillStyle = "#e3f0f5";
canvasContext.fillStyle = "transparent";
canvasContext.fillRect(0, 0, sizedWindowWidth, 200);</p>
<p> canvasContext.moveTo(50, 150);
canvasContext.lineTo(sizedWindowWidth - 50, 150);
canvasContext.stroke();</p>
<p> 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;
});</p>
<p> $(canvas).on('mouseup', function(e) {
if (leftMButtonDown && e.which === 1) {
leftMButtonDown = false;
isSign = true;
}
e.preventDefault();
return false;
});</p>
<p> // 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;
});</p>
<p> //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);</p>
<p> e.preventDefault();
return false;
});</p>
<p> $(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();</p>
<p> e.preventDefault();
return false;
});</p>
<p> $(canvas).on('touchend', function(e) {
if (leftMButtonDown) {
leftMButtonDown = false;
isSign = true;
}</p>
<p> });
}
</script></p>
<p>
또,
어떤 분은 아래처럼
</p>
<p><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));</p>
<p> closePopUp();
} else {
alert('서명해주세요');
<span style="background-color:#f1c40f;">event.preventDefault();</span>
}
}
</script></p>
<p>
요렇게 하면 된다고 하시던데... 전혀 작동을 안하더라구요.. 고수님들 의견 을 듣고 싶습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
3년 전
</p>
<p>if($('#wr_1').val() == "") {</p>
<p><code> alert('서명해주세요');</code></p>
<p><code> return false;</code></p>
<p>}else {</p>
<p><code>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();</code></p>
<p>}</p>
<p>
이렇게 해보세요
꼭 input에다가 id를 wr_1로 지정 해주세요
여기 wr_1은 여분필드인데 여분필드는 알아서 응용해서 1이든 5이든간에 하고싶은걸로 쓰셔서
id를 줘야되요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
꽁치입니다
3년 전
�
릴보이즈
3년 전
fun_submit 함수 내부에서 저거 그대로 넣으셔서 하면되요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
천천히 다시 처음부터 해본 후에 메세지 남길게요..
적극적으로 도움을 주셔서... 감사합니다.^^