クリックするとデータベースが更新されて消えるフォーム要素がいくつかあります。
最初に、「チェックイン」というボタンがあります。クリックすると、データベースが更新され、ボタンの代わりにドロップダウンが表示されます。ドロップダウンには、ユーザーが選択できる場所があり、対応する場所番号の値があり、クリックするとデータベースが更新されます。最後のオプションには [チェックアウト] というラベルが付けられており、クリックすると、データベースが最後にもう一度更新され、チェックアウトされたことを示す赤いテキストが表示されます。
問題は、上記のプロセスのセットが複数あることです (つまり、選択に変わり、Checked Outを読み取る多くの Check In ボタンがあり、すべて個別に機能します)。したがって、データベースを更新すると同時に、各セットの ID をデータベースに渡す方法が必要です。各ボタンの下にある隠しフィールドのようなものを考えていました。そこにはIDが入力されており、 [チェックイン]ボタンがクリックされると、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>
私の解決策が実行可能かどうかはわかりませんので、他の解決策を提案してください。他の詳細が必要な場合は、お問い合わせください。
助けてくれてありがとう！