我正在努力开发一个酒店预订网站..就像在第一页一样，你必须选择目的地，登记入住日期并查看人数。 在第2页，它显示了该目的地的可用酒店数量，并且在选择酒店的选择时，您将被引导至第3页，其中该酒店的房间类型和房间的价格显示有预订选项。
第3页还允许您更改签入和签出日期以及要留下的人数。
我使用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-->
答案 0 :(得分：0)
试一试。我试图在JSFiddle中运行你的代码，控制台给了我一些错误。我为你修好了。数据URL封装存在问题
用这个
替换JS脚本中的else部分 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);
}
});