dqz86173 2016-10-11 17:28
浏览 51
已采纳

如何使用单个AJAX调用更新多个HTML表单字段? [关闭]

I have:

<tr>
    <td>Product</td>
    <!-- line below generates a select box with id="product" -->
    <td id="product"><?=$this->formSelect($form->get('product'));?></td>
</tr>
<tr>
    <td>Description</td>
    <td><input type="text" name="Description" id="Description" /></td>
</tr>
<tr>
    <td>Quantity</td>
    <td><input type="text" name="Quantity" id="Quantity" /></td>
</tr>
<tr>
    <td>Price</td>
    <td><input type="text" name="Price" id="Price" /></td>
</tr>

Question

When using onupdate feature of jQuery, that is tied to event of changing value of "product" select box, how do I update Description, Quantity and Price fields.

What I have now is this:

$("#product").change(function() {
    $.ajax({
        type : "POST",
        url : "updatedescription.php",
        data : 'product_id=' + $(this).val(),
        cache : false,
        success : function(html) {
            $("#Description").html(html);
        }
    });

    return false;
});

But it updates Description only.

PHP Code

function loadDescriptionByProduct()
{
    $product = filter_var($_POST['product_id'], FILTER_SANITIZE_STRING);
    $description = $this->repository->getDescriptionByProduct($product);
    echo $description;
}

function getDescriptionByProduct(string $product)
{
    $sql = "SELECT description FROM product where product=?";
    $result = db_param_query($sql, $product);
    $row = db_fetch_array($result);
    $description = $row['description'];
    return $description;
}
  • 写回答

1条回答 默认 最新

  • dougaxing8673 2016-10-11 20:08
    关注

    You need to call a single resource like getProductDetails.php and get there all the information related to the product you want.

    PHP

    function getProductDetails(string $product)
    {
        $sql = "SELECT price, description FROM product where product=?";
        $result = db_param_query($sql, $product);
        $row = db_fetch_array($result);
    
        $response = array(
            'price' => $row['price'],
            'desc' => $row['description']
        );
    
        return json_encode($response); //return a json response.
    }
    

    Javascript

    $("#product").change(function() {
        $.ajax({
            type : "POST",
            url : "getProductDetails.php",
            data : 'product_id=' + $(this).val(),
            cache : false,
            success : function(response) {
                var parsedResponse = $.parseJSON(response);
    
                $("#Description").html(parsedResponse.desc);
                // ...
                $("#Price").html(parsedResponse.price);
            }
        });
    
        return false;
    });
    

    Also, you can use Content-Type: application/json response header and indicate to jQuery that this is JSON by using the dataType: 'json' parameter. (and remove $.parseJSON())

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB yalmip 可转移负荷的简单建模出错,如何解决?
  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?