2014-03-05 2 views
0

호텔 예약 웹 사이트를 개발하려고합니다. 첫 번째 페이지에서 목적지를 선택하고 날짜를 체크하고 날짜를 확인해야합니다. 두 번째 페이지의 해당 페이지에서 해당 호텔에서 사용할 수있는 호텔의 수를 표시하며 호텔 선택시 3 번째 페이지로 이동합니다. 호텔의 객실 유형 및 객실 가격이 예약 옵션과 함께 표시됩니다 .Ajax가 올바른 값으로 작동합니다.

세 번째 페이지에서는 체류 할 인원의 수와 함께 체크인 및 체크 아웃 날짜를 변경할 수도 있습니다.

나는이 변경하고 새로운 선택한 날짜에 따라 공간의 새로운 가격을 제공하기 위해 Ajax를 사용했다 :

을하지만 내이 기능은 제대로 작동하지 않습니다. 내가 그것을

<script type="text/javascript"> 

function addR() 
{ 
    var term_name = $('#FromDate').val();  //Storing the value of textbox into a variable 
    var ToDate = $('#ToDate').val();  //Storing the value of textbox into a variable 
    var SessionID = $('#SessionID').val();  //Storing the value of textbox into a variable 
    var HotelID = $('#HotelID').val();  //Storing the value of textbox into a variable 
    var Adult = $('#Adult').val();  //Storing the value of textbox into a variable 
    var Child = $('#Child').val();  //Storing the value of textbox into a variable 
    var ajRoomNo = $('#ajxRoomNo').val();  //Storing the value of textbox into a variable 

    if(term_name == '')      //Checking for NULL 
    { 
     $('#propspectDiv').html('Please Enter Your Check-In Date'); //Prints the progress text into our Progress DIV 
     $('#FromDate').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
     if(ToDate == '')      //Checking for NULL 
    { 
     $('#propspectDiv').html('Please Enter Your Check-Out Date'); //Prints the progress text into our Progress DIV 
     $('#ToDate').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
    /*IF ROOM NO IS 1*/ 
    if(Adult >= '4' && ajRoomNo == '1')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Adult').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '1' && Adult >= '3' && ajRoomNo == '1')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '2' && Adult >= '2' && ajRoomNo == '1')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
    if(Child >= '3' && Adult >= '1' && ajRoomNo == '1')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
    /*IF ROOM NO IS 2*/ 



    if(Child >= '5' && Adult >= '2' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '4' && Adult >= '3' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '3' && Adult >= '4' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '2' && Adult >= '5' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '1' && Adult >= '6' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 

    if(Child >= '6' && Adult >= '1' && ajRoomNo == '2')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
    /*IF ROOM NO IS 3*/ 


    if(Child >= '5' && Adult >= '6' && ajRoomNo == '3')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 


    if(Child >= '4' && Adult >= '6' && ajRoomNo == '3')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 


    if(Child >= '5' && Adult >= '5' && ajRoomNo == '3')      //Checking for NULL 
    { 
     $('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV 
     $('#Child').addClass('error');     //Adding the error class to the progress DIV 
     return; 
    } 
    else{ 
     $('#FromDate').removeClass('error'); 
     $('#propspectDiv').removeClass('error');         //Removing the error class from the progress DIV 
     $('#propspectDiv').html('Submitting your Request.<img src="<?php print 'http://'.$_SERVER['SERVER_NAME'];?>/ajax.gif" />'); //Prints the progress text into our Progress DIV 

     $.ajax({ 
       url : '<?php print 'http://'.$_SERVER['SERVER_NAME'];?>/data.php',     //Declaration of file, in which we will send the data 
       data:{ 
        //"name" : term_name    //we are passing the name value in URL 
        "FromDate" : term_name, 
        "ToDate" : ToDate,      //we are passing the name value in URL 
        "SessionID" : SessionID,      //we are passing the name value in URL 
        "HotelID" : HotelID,      //we are passing the name value in URL 
        "Adult" : Adult,      //we are passing the name value in URL 
        "Child" : Child,      //we are passing the name value in URL 
        "ajxRoomNo" :ajRoomNo      //we are passing the name value in URL 
       }, 

       success : function(data){ 
        window.setTimeout(function(){ 
         $('#propspectDiv').html('Your search criteria has been updated'); //Prints the progress text into our Progress DIV 
         $('#data').css("display","block"); //Changes the style of table from display:none to display:block 
         $('#data').html(data);    //Prints the data into the table 
        }, 2000); 
       } 
      }); 
    } 
} 

</script> 

를 해결하는 데 도움이 내 기능을 통해 버튼을 제출 변경 자리에하십시오

<!--Start Modify Search--> 
    <div> 
Modify your Search 
         <div class="con">  

         <div id="w"> 
         <table cellpadding="2" cellspacing="1" border="1" width="100%"> 

         <input type="hidden" id="HotelID" value="<?php print $ghi;?>" /> 
         <input type="hidden" id="SessionID" value="<?php print $SessionI;?>" /> 
         <thead> 
          <tr> 
          <td class="roomvalues">Check-in Date : </td> 
          <td class="roomvalues">Check-out Date : </td> 
          <td class="roomvalues">Room (Select 1-5)</td> 
          <td class="roomvalues">Adult</td> 
          <td class="roomvalues">Children</td> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
         <td><input type="text" name="From-Date" value="<?php if($searchfirstdate!='01/01/1991'){echo '$searchfirstdate';}else{ echo "";}?>" id="FromDate" class="input1 date-picker required date" style="border:1px #7F9DB9 solid;"/></td> 
           <td><input type="text" name="ToDate" value="<?php if($searchenddate!='01/01/1970'){echo $searchenddate;}else{ echo "";}?>" id="ToDate" class="input1 date-picker2 required date" style="border:1px #7F9DB9 solid;"/></td> 
           <td> 
           <!--<select name="ajxRoomNo" id="ajxRoomNo"> 
            <option value="1">1</option> 
            <option value="2">2</option> 
            <option value="3">3</option> 
            <option value="4">4</option> 
            <option value="5">5</option> 
           </select>--> 

           <select name="ajxRoomNo" id="ajxRoomNo"> 
            <option value="1" <?php if($RoomNo==1) echo "selected"; ?>>1</option> 
            <option value="2" <?php if($RoomNo=='2') echo "selected"; ?>>2</option> 
            <option value="3" <?php if($RoomNo=='3') echo "selected"; ?>>3</option> 
            <option value="4" <?php if($RoomNo=='4') echo "selected"; ?>>4</option> 
            <option value="5" <?php if($RoomNo=='5') echo "selected"; ?>>5</option> 
           </select> 


           </td> 
           <td> 
           <select name="Adult" id="Adult"> 
          <option value="1"<?php if($person=='1') echo "selected"; ?>>1</option> 
          <option value="2"<?php if($person=='2') echo "selected"; ?>>2</option> 
          <option value="3"<?php if($person=='3') echo "selected"; ?>>3</option> 
          <option value="4"<?php if($person=='4') echo "selected"; ?>>4</option> 
          <option value="5"<?php if($person=='5') echo "selected"; ?>>5</option> 
          <option value="6"<?php if($person=='6') echo "selected"; ?>>6</option> 
         </select> 
           </td> 
           <td> 
           <select name="Child" id="Child"> 
          <option value="0"<?php if($children=='0') echo "selected"; ?>>0</option> 
          <option value="1"<?php if($children=='1') echo "selected"; ?>>1</option> 
          <option value="2"<?php if($children=='2') echo "selected"; ?>>2</option> 
          <option value="3"<?php if($children=='3') echo "selected"; ?>>3</option> 
          <option value="4"<?php if($children=='4') echo "selected"; ?>>4</option> 
          <option value="5"<?php if($children=='5') echo "selected"; ?>>5</option> 
         </select> 
           </td> 
          </tr> 
          <tr> 
           <td colspan="5"> 
          <input type="button" class="mys" value="Search" onClick="addR()" /> 
          </td> 
         </tbody> 
         </table> 
         <div id="propspectDiv"></div> 

        </div> 


         </div> 
    </div> 
    <!--End Modify Search--> 
+1

와 JS 스크립트에서 다른 부분을 교체 있었다? – JohnnyFaldo

+0

"제대로 작동하지 않음"을 정의하십시오. 어떤 표시가있어 문제가 있습니까? 자바 스크립트 콘솔에 오류가 있습니까? 예상치 못한 동작입니까? 디버깅 할 때 예상되는 동작이 어느 시점에서 변경됩니까? – David

+0

여기에서 날짜가 바뀌면 더 이상 방을 가져 오지 못합니다. 그냥 성공 메시지 – AM26

답변

0

이를보십시오. JSFiddle에서 코드를 실행하려고 시도했지만 콘솔에서 오류가 발생했습니다. 나는 너를 위해 그들을 고쳤다. 데이터 URL

의 캡슐화에 문제가 작동하지 않는 것이

var inhtml = "Submitting your Request.<img src='http://<?php echo $_SERVER['SERVER_NAME']; ?>/ajax.gif' />"; 
    var urlsend = "<?php print 'http://'.$_SERVER['SERVER_NAME']; ?>/data.php"; 
    $('#FromDate').removeClass('error'); 
    $('#propspectDiv').removeClass('error');         //Removing the error class from the progress DIV 
    $('#propspectDiv').html(inhtml); //Prints the progress text into our Progress DI 

    $.ajax({ 
      url : urlsend,     //Declaration of file, in which we will send the data 
      data:{ 
       //"name" : term_name    //we are passing the name value in URL 
       "FromDate" : term_name, 
       "ToDate" : ToDate,      //we are passing the name value in URL 
       "SessionID" : SessionID,      //we are passing the name value in URL 
       "HotelID" : HotelID,      //we are passing the name value in URL 
       "Adult" : Adult,      //we are passing the name value in URL 
       "Child" : Child,      //we are passing the name value in URL 
       "ajxRoomNo" :ajRoomNo      //we are passing the name value in URL 
      }, 

      success : function(data){ 
       window.setTimeout(function(){ 
        $('#propspectDiv').html('Your search criteria has been updated'); //Prints the progress text into our Progress DIV 
        $('#data').css("display","block"); //Changes the style of table from display:none to display:block 
        $('#data').html(data);    //Prints the data into the table 
       }, 2000); 
      } 
     }); 
+0

을 주면 같은 결과를 보입니다 :( 작동하지 않았습니다. – AM26

관련 문제