0

我们正在尝试创建一个快速订单表单，客户在其中输入项目 SKU 及其数量，然后向下跳到下一行并执行相同操作。在选择数量输入后，我们需要让 jQuery 对我们的数据库进行检查，以确保这是一个真正的 SKU，并以成功或失败消息响应客户端。我们查看了各种代码，并通过添加新行和检查单个输入找到了那些可以工作的代码，但是我们找不到也无法编写同时支持两者的代码。不确定我们是否可以允许输入的名称属性使用“name[]”，或者它是否需要一个集合名称、“name_1”、“name_2”等。如果我们使用 name[]，如何调用数据库知道使用哪个 inut 字段来获取变量。

任何帮助是极大的赞赏。请在下面查看我们的代码：

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_1”、“name_2”等。如果我们使用 name[]，如何调用数据库知道使用哪个 inut 字段来获取变量。

通常，当您将事件附加到输入时，使用“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 回答