0

クライアントがアイテムの SKU とその数量を入力し、タブで次の行に移動して同じことを行う簡単な注文フォームを作成しようとしています。数量入力にタブ移動したら、jQuery にデータベースに対してチェックを実行させて、それが実際の SKU であることを確認し、クライアントに成功または失敗のメッセージで応答する必要があります。さまざまなコードを調べ、新しい行を追加して単一の入力をチェックすることで機能するコードを見つけましたが、両方を可能にするコードを見つけることも書くこともできません。入力の name 属性に「name[]」を使用できるかどうか、または「name_1」、「name_2」などのセット名が必要かどうかは不明です。name[] を使用する場合、データベースは、変数を取得するために使用する入力フィールドを認識しています。

どんな助けでも大歓迎です。以下の現在までのコードを参照してください。

HTML:

<table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
   <tr>
    <td colspan="2">Quick Order</td>
   </tr>
  <tr class="person">
     <td><input type="text" name="name[]" class="nameClass" placeholder="Item ID" /></td>
     <td><input type="text" name="qty[]" class="qtyClass" placeholder="QTY" /></td>
  </tr>
  <tr class="person">
     <td><input type="text" name="name[]" class="nameClass" placeholder="Item ID" /></td>
     <td><input type="text" name="qty[]" class="qtyClass" placeholder="QTY" /></td>
  </tr>
 </tbody>
 </table>

Javascript:

<script type="text/javascript">
$(document).ready(function() {
    $("#mytable tbody>tr:last .nameClass").change(function() {
      $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last').hide().fadeIn(500);
      $('#mytable tbody>tr:last .nameClass').val('');
      return false;
    });  // change Function

    $('.nameClass').blur(item_check);
    //});

}); // doc ready

function item_check(){  
    var itemid = $('.nameClass').val();
    //console.log(itemid);
    jQuery.ajax({
     type: "POST",
     url: "checkItem.php",
     data: 'itemid='+ itemid,
     cache: false,
     success: function(response){
        if(response == 1){
            $('.nameClass').css('border', '3px #C33 solid');    
        }else{
            $('.nameClass').css('border', '3px #090 solid');
        }

    }
});
} // end function
</script>
4

1 に答える 1

0

入力の name 属性に「name[]」を使用できるかどうか、または「name_1」、「name_2」などのセット名が必要かどうかは不明です。name[] を使用する場合、データベースは、変数を取得するために使用する入力フィールドを認識しています。

通常、イベントを入力にアタッチする場合、問題の入力は「this」変数を使用して簡単に識別できます。その場合、入力の名前を知る必要さえありません。

また、可変行数で作業しているため、イベントを処理するために jQuery の on() メソッドを検討する必要があります。例 ( jsfiddle デモ):

var my_table = $('#mytable');

// Whenever the last .nameClass input in the table gains focus, clone that row
my_table.on('focus', '.nameClass:last', function () {
    var input = $(this);
    var new_row = input.closest('tr').clone();
    $('input', new_row).val(''); // set blank input values for the cloned row
    $('tbody', my_table).append(new_row);
});

// When a .nameClass input loses focus, check that the SKU in it (if any) is valid
my_table.on('blur', '.nameClass', function () {
    var input = $(this);
    var itemid = $.trim(input.val());
    if (itemid) {
        // Replace demo code with appropriate $.ajax call
        if (itemid == 'fail') {
            input.css('border', '3px #C33 solid');
        } else {
            input.css('border', '3px #090 solid');
        }
    }
});
于 2013-02-19T21:13:29.740 に答える