1

クリックするとデータベースを更新して消えるフォーム要素がいくつかあります。

最初は、[チェックイン]というボタンがあります。クリックすると、データベースが更新され、ボタンの代わりにドロップダウンが表示されます。ドロップダウンには、ユーザーが選択できる場所があり、対応する場所番号の値があり、[データベースの更新]をクリックすると表示されます。最後のオプションには[チェックアウト]というラベルが付いており、クリックするとデータベースが最後に更新されることになっているため、[チェックアウト済み]という赤いテキストが表示されます。

これが私のコードです：

<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='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>

問題は、ユーザーが[チェックアウト]をクリックするまですべてが機能し、その後、赤いテキストが表示されず、ドロップダウンが消えないことです。どうしたの？

助けてくれてありがとう！

4

1 に答える 1

1

ドロップダウン選択リストにチェックアウトボタンを配置するのは正しくありません。これらのリストはオプション用であり、コマンド用ではありません。

リストに続いて非表示になっているチェックアウト ボタンを用意しないのはなぜですか。

<button class="checkOut" style="display:none;" value="Check Out" />

このようにして、部屋のリストが入力されたら、チェックアウト ボタンを再び表示するように設定するだけです。これは、ページ ロジック フロー (チェックイン - 選択 - チェックアウト) を意味します。

赤いテキストの場合、ドロップダウンを次のように置き換えますか?

$(".checkOut").click(function(e) {
  $(".locationSelect").html("<p style='color:red'>Checked out!</p>");
});

考えるだけの食べ物です。

$('.locationSelect').change()または、ハンドラーで選択したオプションを確認することもできます。

$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    // Perform checkout logic.
  }
  else {
    // Perform room select logic.
  }
});
于 2012-10-24T00:59:53.777 に答える