폼메서드로 예약날짜 예약페이지로 옮기기

[sehyeogi365]

체크인

            <input type="text" id="startDate" class="" name="startDate" value="" autocomplete="off"><!--각각 객체를 만들어야 하므로 id값 부여.-->
            ~   
            <label class="mt-3">체크아웃 </label>
            <input type="text" id="endDate" class="" name="endDate" value= " " autocomplete="off"><br> 다음처럼 데이터픽커를 통해서 체크인 체크아웃 데이터를 입력한담에 url링크를 클릭했을때 선택한 날짜가 들어가게 하려면? 

[sehyeogi365]

//예약버튼 여기에 url링크 넣기 $(".reserve-btn").on("click", function(){

         //let startDate = $(this).val();
         //let endDate = $(this).val();

         var startDate = document.getElementById('startDate').value;
         var endDate = document.getElementById('endDate').value;

         var roomId = $(this).data('room-id');
         var lodgingId = $(this).data('lodging-id');

         var newUrl = `/lodging/reservation/view?startDate=${startDate}&endDate=${endDate}&roomId=${roomId}&lodgingId=${lodgingId}`;

         // 새 URL로 이동
         window.location.href = newUrl;

     });

data-lodgingId="${lodging.id}">리뷰 우선 이렇게 수정해봄

[sehyeogi365]

//예약버튼 여기에 url링크 넣기 $(".reserve-btn").on("click", function(){

         //let startDate = $(this).val();
         //let endDate = $(this).val();

         var startDate = document.getElementById('startDate').value;
         var endDate = document.getElementById('endDate').value;

         var roomId = $(this).data('room-id');
         var lodgingId = $(this).data('lodging-id');

         console.log();
         var newUrl = '/lodging/reservation/view?startDate=startDate&endDate=endDate&roomId=${roomId}&lodgingId=${lodgingId}';

         // 새 URL로 이동
         window.location.href = newUrl;

     });

체크인

            <input type="text" id="startDate" class="" name="startDate" value=
            ~   
            <label class="mt-3">체크아웃 </label>
            <input type="text" id="endDate" class="" name="endDate" value= 

파라미터로 잘 안받아와진다.

[sehyeogi365]

우선적으로 컨트롤러 예약페이지도 수정하고, url링크도 수정해서 startDate, endDate 불러올수있다.

[sehyeogi365]

분명한 단점은 알겠다. 우선 지피티가 짜준코드도, alert, console,log 둘다 안먹히는 상황이고,

http://localhost:8080/lodging/reservation/view?startDate=2024-07-30&endDate=2024-07-31&roomId=1&lodgingId=3

했을때도 그 날짜가 안뜨고 무조건 오늘날짜가 불러와진다.

[sehyeogi365]

$(".reserve-btn").on("click", function(event){

         //let startDate = $(this).val();
         //let endDate = $(this).val();
          event.preventDefault();
         var startDate = document.getElementById('startDate').value;
         var endDate = document.getElementById('endDate').value;

         var roomId = $(this).data('room-id');
         var lodgingId = $(this).data('lodging-id');
         if(startDate != '' && endDate != ''){
             alert("시작날짜 : " + startDate);
             alert("끝나는날짜 : " + endDate);
         }

         var newUrl = '/lodging/reservation/view?startDate=${startDate}&endDate=${endDate}&roomId=${roomId}&lodgingId=${lodgingId}';

         // 새 URL로 이동
         location.href = newUrl;

     });   

document.getElementById('reserveBtn').addEventListener('click', function(event) { event.preventDefault(); // 기본 링크 동작 방지

         // 폼에서 날짜 값 가져오기
         var startDate = document.getElementById('startDate').value;
         var endDate = document.getElementById('endDate').value;

         // roomId와 lodgingId 가져오기
         var roomId = this.getAttribute('data-room-id');
         var lodgingId = this.getAttribute('data-lodging-id');

         // 새로운 URL 생성
         var url = '/lodging/reservation/view?startDate=' + encodeURIComponent(startDate) +
                   '&endDate=' + encodeURIComponent(endDate) +
                   '&roomId=' + encodeURIComponent(roomId) +
                   '&lodgingId=' + encodeURIComponent(lodgingId);

         // 새 URL로 이동
         window.location.href = url;

         console.log(startDate);
         console.log(endDate);

     });

이렇게 했는데도 안됨

[sehyeogi365]

역시나 데이트픽커 바로 밑으로 아작스 문 옮기니 url링크에 선택한 날짜는 들어온다. 그런데 400에러

[sehyeogi365]

알고보니 로징아이디가 안들어오는데

let roomId = $(this).data('room-id'); let lodgingId = $(this).data('lodging-id'); 여기가 잘못된듯 위에 html쪽을 수정하든 여기를 수정하든 하기

[sehyeogi365]

아예 리저브 버튼태그 주석해도 400에러가 뜸

Failed to convert value of type 'java.lang.String' to required type 'java.util.Date';

이렇게 뜨는데..

[sehyeogi365]

그냥 예약하기 버튼에 로징아이디 데이터속성 넣으니 됐다.

data-lodging-id = "${lodging.id }" data-room-id="${room.id }">예약하기

[sehyeogi365]

근데 보다시피 예약화면에선 그냥 오늘날짜, 내일날짜가 들어가지는 모습

[sehyeogi365]

우선 startDate endDate변수를 각각 오늘,내일날짜로 지정하는 변수밑에 url 파라미터 추출하는 함수, 변수 추가

// URL 파라미터를 추출하는 함수 function getParameterByName(name) { name = name.replace(/[[]/, "\[").replace(/[]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " ")); }

    // URL에서 startDate와 endDate 파라미터 추출
    var startDate = getParameterByName('startDate');
    var endDate = getParameterByName('endDate');

[sehyeogi365]

url 파라미터 값을 각각 데이터 픽커 초기값으로 초기화

// URL 파라미터 값으로 Date Picker 초기값 설정 if (startDate) { $("#startDate").datepicker("setDate", startDate); } if (endDate) { $("#endDate").datepicker("setDate", endDate); }

[sehyeogi365]

이 url 파라미터 추출하는거를 배워서 차후에

숙소리스트에서 객실리스트

메인페이지에서 숙소리스트로

선택한 데이트픽커 불러오는걸 해보자 나중에

[sehyeogi365]

const url = new URL(window.location.href); //좀더 가독성있게 코드문 고쳐보기 const urlParams = url.searchParams;//좀더 가독성있게 코드문 고쳐보기

    // URL에서 startDate와 endDate 파라미터 추출
    const startDate = urlParams.get('startDate');
    const endDate = urlParams.get('endDate');

이렇게 url 파라미터 추출하는거 수정함