Question

我们正在尝试创建一个快速订单表单，其中客户输入项目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>

Answer 1

不确定我们是否允许输入的名称属性使用“name []”，或者是否需要设置名称，“name_1”，“name_2”等。如果我们使用name []，怎么办？对数据库的调用知道使用哪个inut字段来获取变量。

通常，当您将事件附加到输入时，使用“this”变量可以轻松识别相关输入。您甚至不需要知道输入的名称。

此外，由于您使用的是可变数量的行，因此您可能应该查看jQuery's on() method来处理事件。例如（jsfiddle demo）：

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');
        }
    }
});

使用jQuery的快速订购表单

1 个答案: