Question 265541 in PHP Question posted in
Official manual can be found here.

Php – How do i update form fields from DB after changing a <select> component

I have a form which lists a number of stars (stellar objects) upon there is a <select> control and two <inputs> I am needing advice on populating the two inputs from the DB upon the change of the <select> I am using PHP CSS HTML and wondering if I should go down the JS or Ajax route.

Here is the basic form page so far.

    <?php
require( '../db_connect.php' );
include( '../inc/tvms_inc.php' );
session_start();
$starsq = "SELECT * FROM ast_stars WHERE constellation=5";
$starsr = mysqli_query( $conn, $starsq );
?>
<!doctype html>
<html data-bs-theme="dark" lang="en">
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        .center-screen {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 300px;
            height: 150px;
            border: 3px solid #c0c0c0;
            text-align: center;
            border-radius: 15px;
            padding: 5px;
        }
    </style>
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="center-screen">
        <h4>Star Selector</h4>
        <form action="process_add.php" method="post">
            <select name="starnumber">STAR No :
        <?php while($star=mysqli_fetch_assoc($starsr)) { ?>
            
            <option value="<?php echo $star['omag']; ?>"><?php echo $star['omag']; ?></option>
            
            <?php } ?>
        </select>
            <br>
            <input name="xcoord" placeholder="X Coord"></input><br>
            <input name="ycoord" placeholder="Y Coord"></input>
        </form>
    </div>
</body>
</html>

How would I achieve this?

I would need to do a mysqli query on changing the <select> and populate the inputs from the results.

Tags:

3

Answers


  1. 0

    You can update form fields by calling a js function onchange=myfunction()
    and add it to update form fields.

    Login or Signup to reply.
  2. 0

    I would go the JS route. Since you’re populating all options as select options, I suppose there aren’t too many datasets, so there’s no need to make users wait for an ajax request to complete.

    Here’s an example on how to achieve this:

    <?php
require( '../db_connect.php' );
include( '../inc/tvms_inc.php' );
session_start();
$starsq = "SELECT * FROM ast_stars WHERE constellation=5";
$starsr = mysqli_query( $conn, $starsq );
$options = [];
$coords = [];
while($star=mysqli_fetch_assoc($starsr)) {
    $hash = md5($star['omag']);
    $options[] = "<option value="{$hash}">{$star['omag']}</option>";
    $coords[$hash] = [
        "x" => $star['x'],
        "y" => $star['y'],
    ];
}
?>
<!doctype html>
<html data-bs-theme="dark" lang="en">
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        .center-screen {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 300px;
            height: 150px;
            border: 3px solid #c0c0c0;
            text-align: center;
            border-radius: 15px;
            padding: 5px;
        }
    </style>
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="center-screen">
        <h4>Star Selector</h4>
        <form action="process_add.php" method="post">
            <select name="starnumber" onchange="showCoords(this);">STAR No :
                <?php echo implode(PHP_EOL, $options); ?>
            </select>
            <br>
            <input name="xcoord" id="xcoord" placeholder="X Coord"></input><br>
            <input name="ycoord" id="ycoord" placeholder="Y Coord"></input>
        </form>
    </div>
    <script>
        const coords = <?= json_encode($coords); ?>;
        function showCoords(select) {
            document.getElementById('xcoord').value = coords[select.value].x;
            document.getElementById('ycoord').value = coords[select.value].y;
        }
    </script>
</body>
</html>

    You will have to change $star['x'] and $star['y'] to whatever field names you are using. I was assuming x and y since you didn’t provide your db schema.

    Login or Signup to reply.
  3. 0

    You can separate the page that you get and fetch data from the database and then get them with js every time the page load or the select is change.
    maybe this solution work for you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search