javascript - How to use ajax to populate input with select option with data from database? - Stack Overflow

admin管理员组

文章数量:1026989

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.

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.

• javascript
• php
• jquery
• ajax
• pdo

Share Improve this question Follow edited Apr 1, 2019 at 12:42 Ladia asked Apr 1, 2019 at 10:56 LadiaLadia 3111 silver badge88 bronze badges 5

• Why are you using AJAX to do this? You can just stick to PHP. – Sanguinary 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? – Ladia 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. – Sanguinary Commented Apr 1, 2019 at 11:04
• yeah that is what i need, i just dont know how i can do that... – Ladia Commented Apr 1, 2019 at 11:05
• Possible duplicate of On Dropdown Selection, how to fill plete form fields from Database – Sanguinary Commented Apr 1, 2019 at 11:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

As you asked above in ments: 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 remend 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./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>
...

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.

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.

• javascript
• php
• jquery
• ajax
• pdo

Share Improve this question Follow edited Apr 1, 2019 at 12:42 Ladia asked Apr 1, 2019 at 10:56 LadiaLadia 3111 silver badge88 bronze badges 5

• Why are you using AJAX to do this? You can just stick to PHP. – Sanguinary 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? – Ladia 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. – Sanguinary Commented Apr 1, 2019 at 11:04
• yeah that is what i need, i just dont know how i can do that... – Ladia Commented Apr 1, 2019 at 11:05
• Possible duplicate of On Dropdown Selection, how to fill plete form fields from Database – Sanguinary Commented Apr 1, 2019 at 11:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

As you asked above in ments: 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 remend 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./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>
...

本文标签： javascriptHow to use ajax to populate input with select option with data from databaseStack Overflow