Question

我有一个基于所选项目填充多个字段的ajax函数。但我希望有额外的行，人们可以选择相同形式的更多项目。并尝试在其余行中运行相同的ajax函数而不是仅运行一行。提交表单后，有些行可能会留空。

根据我的代码填充多行中的多个字段的最佳方法是什么？

这是我的表单代码，它现在只有一行供用户选择和插入，但我想为用户提供大约10行：

<form name="form" method="post" action="placedOrder.php">
    <table width="70%" border="5" align="center">
        <tr>
            <th scope="row">Item Name</th>
            <th scope="row">Item SKU</th>
            <th scope="row">Quantity</th>
            <th scope="row">Side Mark</th>
            <th scope="row">Unit Price</th>
            <th scope="row">Total Price</th>
        </tr>
        <tr>
            <th scope="row">
                <?php
                    include('connect.php');

                    $result = mysqli_query("SELECT description FROM products") 
                            or die(mysqli_error());
                    print '<select name="description" id="description" value="description">';
                    print '<option value="" disabled selected>Please Select A Product</option>';
                    while ($info = mysqli_fetch_array($result))
                    {
                        $p = $info["description"];
                        $p = htmlspecialchars($p);
                        printf('<option value="%s">%s</option>', $p, $p);
                    }
                    print '</select>';
                    ?>
            </th>
            <th scope="row">
                <input name="sku_1" id="sku_1" readonly />
            </th>
            <th scope="row">
                <input name="qty_1" />
            </th>
            <th scope="row">
                <input name="note_1" />
            </th>
            <th scope="row">
                <input name="uPrice_1" id="uPrice_1" readonly />
            </th>
            <th scope="row">
                <input name="tPrice_1" id="tPrice_1" readonly />
            </th>
        </tr>
    </table>
    <input type="submit"/>
</form>

这是我的ajax功能：

<script type="text/javascript" language="javascript">
$(function () {
    $('#description').change(function () {
        $.ajax({
            type: 'POST',
            url: 'orderAuto.php',
            data: {
                description: $('#description').val()
            },
            dataType: 'json',
            success: function (data) //on recieve of reply
            {
                var skuId = data[0]; 
                var unitPrice = data[1];
                $('#sku_1').val(skuId);
                $('#uPrice_1').val(unitPrice);
            }
        });
    });
});
</script>

这是我的php代码：

<?php
    include('connect.php');
    $p = mysqli_real_escape_string($_POST['description']);
    $result = mysqli_query("SELECT sku_id, unit_price FROM products WHERE description= '".$p."'");
    $array = mysqli_fetch_array($result);
    echo json_encode($array);
?>

Answer 1

将您的AJAX方法声明为带有选择器数组的命名函数：这将允许您重用该函数并添加更多使用它的事件处理程序。

类似的东西：

function myAJAX(selectorArray) {
    $.ajax({
        //bunch of stuff
       data: { description: $(this).val() },
       // more stuff
       success: function(data){
         var skuId = data[0], 
             unitPrice = data[1];
         selectorArray[0].val(skuId);
         selectorArray[1].val(unitPrice);
       }
    });
}

另一种方法是为事件处理程序使用类选择器并在其中指定目标元素。

$('mySelector').on('change', '#targetSelector', myAJAX(selectors));

这里的想法是使用父选择器和其中的附加选择器。

<div id="box"> 
    <p id="text">Here is some text.</p>
    <p>This is also some text</p>
</div>

在此示例HTML中，我们有一个div作为父级，一些p作为子级。因此，如果我们想使用我们的事件处理程序（假设我们不需要任何其他参数），它将如下所示：

$('#box').on('change', '#text', myAJAX);

我们正在选择我们想要异步更改的元素的父元素，并使用我们的AJAX调用过滤到我们想要更改的特定元素。有关更多信息，请参阅jQuery documentation以使用on方法处理事件。

一个ajax函数在同一个窗体上运行多行

1 个答案: