Question

我测试中遇到的问题是这样的。

您有1个选择，有2个选项（项目编号1和项目编号2）和2个输入字段（价格，重量）。您将如何在不编写输入字段的情况下对其进行更改？

因此，经过长时间的搜索和尝试（没有太多运气），我了解到我需要使用ajax来使其工作。所以我尝试了一堆，这是我尝试编辑的代码，因此可以正常工作。 getAllproduct只是一个选择，用于获取产品中表中的所有数据。这是id, name, item_number, price, weight。无论如何，这是我的代码

<?php
    $sth = $db->prepare("SELECT `price`,`weight` FROM product");
    $sth->execute();
    $row = $sth->fetch(PDO::FETCH_ASSOC);
    $row = array();
    json_encode($row);
?>

product.php

<div class="form-group col-2">
    <label for="product">Item number</label>
    <?=@$error['product']?>
    <select class="form-control" name="product" id="product" onChange="getproduct(this.value)">
        <?php foreach ($csv->getAllproduct() as $csv) { ?>
        <option value="<?= @$csv->id ?>" selected><?= @$csv->product?></option>
        <?php } ?>
    </select>
</div>

<div class="form-group col-2">
    <label for="weight">weight</label>
    <?=@$error['weight']?>
    <input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
    <label for="price">price</label>
    <?=@$error['price']?>
    <input type="text" name="price" id="price" class="form-control">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

<script>
function getproduct(val){
$.ajax({
    type:"POST",
    url:"pages\call.php",
    data: 'product='+val,
    success: function(response){
        var result = JSON.parse(response);
        if (result.response == true) {
            var data = result.rows;
            $("#weight").val(data[0].weight);
            $("#price").val(data[0].price);
        }else if (result.response == false) {
            $('#product').append('<option>No products were found!</option>');
        }
    }
});
}
</script>

我希望能够执行的操作是选择一个项目编号，它将自动使用该项目编号中的数据库内部数据填充输入字段的价格和重量。

我还没有学到很多Ajax / js，所以对我们的帮助非常感谢。

尝试：在其他使用此代码的项目中。还没有开始工作。

<form class="row" method="POST" >
<div style="border-color:#dddddd;" class="dropdown-divider col-12"></div>

<script>$('#Varenummer').on('change', function() {
    var selectedOption = $(this).find('option:selected');
    $('#Tolminus').val(selectedOption[0].dataset.Tolminus);
    $('#Tolplus').val(selectedOption[0].dataset.Tolplus);
    });
</script>

<div class="form-group col-2">
    <label for="Varenummer">Varenummer</label>
    <?= @$error['Varenummer'] ?>
    <select class="form-control" name="Varenummer" id="Varenummer">
<?php
foreach ($csv->getAllVarenummer() as $csv) {?>
        <option value="<?= @$csv->id ?>" data-Tolminus="<?= @$csv->Tolminus ?>" 
data-Tolplus="<?= @$csv->Tolplus ?>"><?= @$csv->Varenummer ?></option>
<?php }?>
    </select>
</div>

<div class="form-group col-2">
    <label for="Tolminus">Tol -</label>
    <?= @$error['Tolminus'] ?>
   <input type="text" name="Tolminus" id="Tolminus" class="form-control" value="">
</div>
<div class="form-group col-2">
    <label for="Tolplus">Tol +</label>
    <?= @$error['Tolplus'] ?>
   <input type="text" name="Tolplus" id="Tolplus" class="form-control" value="">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

jquery片段和其他片段被添加到页脚中。

Answer 1

如您在上面的评论中所述：i need it to the input to change when i select an option. can i still only use php? ...

是的

您可能根本不需要ajax。对于您的任务，我建议将权重和价格值预加载到相应的data-元素的option属性中。然后，在选择更改上，只需获取这些值并将其粘贴到输入中即可。

$('#product').on('change', function() {
  var selectedOption = $(this).find('option:selected');
  
  $('#weight').val(selectedOption[0].dataset.weight);
  $('#price').val(selectedOption[0].dataset.price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-2">
    <label for="product">Item number</label>
    <select class="form-control" name="product" id="product">
        <option disabled selected>Choose product...</option>
        <option value="1" data-weight="100" data-price="1000">Product 1</option>
        <option value="2" data-weight="50" data-price="200">Product 2</option>
        <option value="3" data-weight="25" data-price="115">Product 3</option>
    </select>
</div>

<div class="form-group col-2">
    <label for="weight">weight</label>
    <input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
    <label for="price">price</label>
    <input type="text" name="price" id="price" class="form-control">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

对于生成的PHP，选择（假设getAllproduct方法返回weight和price属性）：

...
<div class="form-group col-2">
    <label for="product">Item number</label>
    <?=@$error['product']?>
    <select class="form-control" name="product" id="product">
        <?php foreach ($csv->getAllproduct() as $csv) { ?>
        <option value="<?= @$csv->id ?>" data-weight="<?= @$csv->weight ?>" data-price="<?= @$csv->price ?>"><?= @$csv->product?></option>
        <?php } ?>
    </select>
</div>
...

如何使用Ajax使用来自数据库的数据填充带有select选项的输入？

1 个答案: