자바스크립트 초보 도와주세요
본문
안녕하세요 제가 datepicker와 timepicker 데이터를 전송하는데 자꾸 변경할 날짜가 아닌 현재시간으로만 넘어가서 질문 드려요
해당 input에 value는 바뀐걸로 넘어가는데 제가 설정한 파라미터로는 자꾸 현재시간으로만 넘어가는데 어디서 문제인지 알려주시면 감사하겠습니다.
해당 input id는 startDt, startTime endDate, endTime이고
startdtm, enddtm에 해당 값을 넣어서 보내는 중이에요
<script type="text/javascript">
$(document).ready(function() {
var startdtm_val;
var enddtm_val;
$(document).ready(function() {
$(".datepicker").datepicker({
dateFormat : 'yy-mm-dd'
});
//$(".datepicker").datepicker('setDate', 'today');
$(".timepicker").timepicker({
timeFormat : 'HH:mm:00'
});
//$("#endTime").timepicker('setTime', new Date());
startdtm_val = $("#startDt").val() + "T" + $("#startTime").val()+".000Z";
enddtm_val = $("#endDate").val() + "T" + $("#endTime").val()+".999Z";
$('#startdtm').val(startdtm_val);
$('#enddtm').val(enddtm_val);
console.log(startdtm_val)/
//getSummary();
});
init();
});
function init(){
getInterfaceLogSystem();
}
function getInterfaceLogSystem() {
var target = "/interface/interfaceLogview/getinterfaceLogInfo";
var data = $("#searchForm").serializeObject();
console.log("data : "+ data)
$.ajax({
url:target,
contentType : "application/json",
data : JSON.stringify(data),
type : "POST",
success : function(result) {
$('#interfaceLogTB').datagrid({
data : result.cList
});
}
});
}
</script>
<body>
<div id="source-system-search" class="search-Box" >
<form id="searchForm" action="" method="POST" onsubmit="return false;">
<div class="selectBox">
<span>Start Date</span>
<input type="text" class="datepicker" id="startDt" name="startDt" size="8" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
<input type="text" class="timepicker" id="startTime" name="startTime" size="7" value="00:00:00"style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
</div>
<div class="selectBox">
<span>End Date</span>
<input type="text" class="datepicker" id="endDate" name="endDate" size="8" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
<input type="text" class="timepicker" id="endTime" name="endTime" size="7" value="00:00:00" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
</div>
<input type = "hidden" id ="startdtm" name="startdtm">
<input type = "hidden" id ="enddtm" name="enddtm">
</form>
<a href="javascript:getInterfaceLogSystem()" id="getInterfaceLogSystem" class="easyui-linkbutton" class="easyui-linkbutton" data-options="iconCls:'icon-search'"></a>
</div>
답변 1
1. 소스를 올리실때는 에러가 없는지 살펴봐주세요.
아마 이리저리 수정하시다가 혼란스러워진 소스를 올리신듯 합니다.
2. 소스는 [ code ]와 [ /code ]사이에 넣어주셔야 예쁘게 보입니다.
3. 소스를 이리저리 수정해보 본 결과... 아래 부분이 주석 처리 되어 있더군요. 주석 해제해주시구요.
$('#startdtm').val(startdtm_val);
$('#enddtm').val(enddtm_val);
4. 저걸 document.ready() 안에 넣어놓으니, 나중에 변경후 무언가 액션을 해도 기존 값만 가지고 있는 겁니다. 저 위에 코드를 getInterfaceLogSystem() 함수 안에도 넣으세요.
function getInterfaceLogSystem() {
$('#startdtm').val(startdtm_val);
$('#enddtm').val(enddtm_val);
var target = "/interface/interfaceLogview/getinterfaceLogInfo";
var data = $("#searchForm").serializeObject();
console.log(data);
console.log("data : "+ data)
$.ajax({
url:target,
contentType : "application/json",
data : JSON.stringify(data),
type : "POST",
success : function(result) {
$('#interfaceLogTB').datagrid({
data : result.cList
});
}
});
}
https://jsfiddle.net/tankla/8ao34vde/30/ <-- 참고하세요.
정말 감사합니다. 작성해주신 코드를 보니 위에서 레디펑션이라 페이지가 로드 되면 바로 선언된것에 기존 초기값이 들어가있는 상태고 action시 현재 등록되어있는 value로 바뀌고 전송되는거 맞나요?
제가 소스를 보기엔 Action시에 getInterfaceLogSystem() 함수를 호출하는걸로 판단되어서요.
그러니 Action을 할때, startdtm과 enddtm에 변경된 값을 넣어주셔야
서버측에서 제대로 된 값을 받을 수 있습니다.
그게 아니라면
서버에서 직접 startDt과 startTm 의 값을 연결해서 사용할 수도 있을거구요.