0

The question I've got in my test goes like so.

You have 1 select with 2 options(item number1 and item number2) and 2 input fields(price,weight). How would you make the input fields change without writing in them?

So after a long time of searching and trying stuff out (without much luck) I've learned that I need to use ajax for this to work. so I have tried a bunch and this is the code I've tried edit so it would work. getAllproduct is just a select that fetches all the data inside my table with products. this is id, name, item_number, price, weight. anyhow here is my code

<?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>

What I expect to be able to do is select an item number and it will automatically populate the inputfields price and weight with the data inside the database from the item number.

I haven't learned a lot of Ajax/js so Any help is appreciated.

Attempt: on other project using this code. havent gotten it to work yet.

<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>

the jquery scrips and others are added in the footer.

Improve this question
5
  • Why are you using AJAX to do this? You can just stick to PHP. Commented Apr 1, 2019 at 11:00
  • i need it to the input to change when i select an option. can i still only use php? Commented Apr 1, 2019 at 11:01
  • Alright, so you need it to automatically change in the fields below before you submit it right? Using AJAX would suit your needs best then. Commented Apr 1, 2019 at 11:04
  • yeah that is what i need, i just dont know how i can do that... Commented Apr 1, 2019 at 11:05
  • Possible duplicate of On Dropdown Selection, how to fill complete form fields from Database Commented Apr 1, 2019 at 11:07

1 Answer 1

Reset to default
3

As you asked above in comments: i need it to the input to change when i select an option. can i still only use php?...

Yes.

You might not need ajax at all. For your task I'd recommend to preload weight and price values into data- attributes of corresponding option elements. Then, on the select change, just get those values and paste them to inputs.

$('#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>

For the PHP generated select (assuming the getAllproduct method returns weight and price properties):

...
<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>
...
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Is it possible to make those preset data come from database? Like i have in my data Item_number 1 with weight 100 but that might change later.
In this particular case all needed data is being generated by PHP. So, you obviously can do this in the foreach loop that populates the select element with option ones. Though I haven't seen the code of your getAllproduct method, I still believe that it returns weight and price as well as id for the product, so, you can do sth like <option value="<?= @$csv->id ?>" data-weight="<?= @$csv->weight ?>" data-price="<?= @$csv->price ?>"><?= @$csv->product?></option>
...Change later when? While user have the page opened?
It makes sense now thanks alot. will try test it out abit and see if it works.
no i mean if the product changes weight. then i would need to go into the code and change the weight here. ("ive got a other page that can edit the product")
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.