我有几个表单元素,当点击更新数据库并消失时。
起初,我有一个显示签入的按钮。单击它后,数据库将更新,并显示一个下拉列表来代替按钮。在下拉列表中,有一些位置供用户选择,它们具有相应位置编号的值,单击更新数据库即可。最后一个选项被标记为签出,单击它后,数据库应该最后一次更新,然后应该出现红色文本说签出。
问题是,上述过程有多组(意味着有许多 Check In 按钮,它们变成选择然后读取Checked Out,它们都单独工作)。所以我需要一种在更新数据库的同时将每个集合的 id 传递给数据库的方法。我在想每个按钮下面的隐藏字段,它填充了 id,然后当单击Check In按钮时,ajax 会发送隐藏字段吗?
这是我的html:
<button class="checkIn">Check In</button>
<form method='post' class='myForm' action=''>
<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='CheckOut'>Check Out</option>
</select>
</form>
这是jquery
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();
$('.finished').hide();
});
$('.checkIn').click(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkIn="+$(this).val(),
success: function(){
$('.checkIn').css("display","none");
$('.locationSelect').show();
}
});
});
$('.locationSelect').change(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "locationSelect="+$(this).val(),
success: function(){
}
});
});
$('.locationSelect option[value="CheckOut"]').click(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkOut="+$(this).val(),
success: function(){
$('.locationSelect').css("display","none");
$('.finished').show();
alert('done');
},
error: function(request){
alert(request.responseText);
}
});
});
</script>
我不确定我的解决方案是否可行,因此请随时提出其他解决方案。如果您需要任何其他详细信息,请尽管询问!
感谢您的任何帮助!