Javascript 显示/隐藏表单元素时出现问题
我有一个网站,通过使用表单元素来更新用户的位置 用户要做的第一件事是单击标记为签入的按钮。这将通过使用AJAX在另一个页面上通过php更新数据库。单击“签入”后,用户将看到一个带有位置列表的选择/下拉列表。用户单击select上的一个位置,然后php页面再次使用该位置进行更新。用户可以多次这样做,每次都更新数据库。当用户完成后,他会向下滚动选择/下拉列表到最后一个名为Check Out的选项。当用户点击checkout时,数据库将再次更新,并显示红色文本,而不是选择checkout 以下是我的代码减去php/数据库的内容:Javascript 显示/隐藏表单元素时出现问题,javascript,jquery,html,Javascript,Jquery,Html,我有一个网站,通过使用表单元素来更新用户的位置 用户要做的第一件事是单击标记为签入的按钮。这将通过使用AJAX在另一个页面上通过php更新数据库。单击“签入”后,用户将看到一个带有位置列表的选择/下拉列表。用户单击select上的一个位置,然后php页面再次使用该位置进行更新。用户可以多次这样做,每次都更新数据库。当用户完成后,他会向下滚动选择/下拉列表到最后一个名为Check Out的选项。当用户点击checkout时,数据库将再次更新,并显示红色文本,而不是选择checkout 以下是我的代
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Hide the form on load
$('.locationSelect').hide();
// Hide the completed message
$('.finished').hide();
});
// When someone clicks checkin this function will be called
$('.checkIn').click(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php", // this page adds date to the database
data: "checkIn="+$(this).val(), // we are sending $_POST['checkIn']
success: function(){
// Display the form once AJAX is finished
$('#myForm').show();
}
});
});
// This function will be called when someone uses the select field
$('.[locationSelect]').change(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "locationSelect="+$(this).val(),
success: function(){
// Display the form once the AJAX is finished
alert('Done');
}
});
});
</script>
以下是html:
<button class="checkIn">Check In</button>
<form method='post' class='myForm' action=''>
<td>
<select name='locationSelect' class='locationSelect'>
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='Check Out'>CheckOut</option>
</select>
</form>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
问题是,当你点击checkin时,select不会出现。我检查了Chrome错误控制台,但没有出现错误
谢谢你的帮助 好吧,这里:
// Display the form once AJAX is finished
$('#myForm').show();
应该是这样的:
// Display the form once AJAX is finished
$('.myForm').show();
除此之外,验证Ajax查询是否正确返回,否则此代码将不运行。
< P>您可能想考虑在Ajax调用上放置错误处理,以查看它们是否正确返回 success: function(){
alert('done');
},
error: function(request){
alert(request.responseText);
}
这将有助于排除它是ajax问题还是与其他问题(如语法)相关的故障。您可以检查它发布到的实际URL吗?我假设这在Chrome开发者工具中可以看到,我知道你可以在Firefox的Firebug中看到。我怀疑您的服务器没有返回任何内容,因此不会调用success函数。您可以为.ajax调用另外设置一个超时和错误处理程序,并查看是否调用了该调用。您应该删除孤独的感谢,有时您只需要休息一下,换一双新眼睛