更改 <select> 组件后如何从数据库更新表单字段-解网

问：

我有一个表格，其中列出了许多恒星（恒星对象），有一个控件和两个我需要建议，以便在更改我正在使用 PHP CSS HTML 时填充数据库中的两个输入，并想知道我是否应该走 JS 或 Ajax 路线。<select><inputs><select>

这是到目前为止的基本表单页面。

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

我该如何实现？

我需要对更改并填充结果中的输入进行 mysqli 查询。<select>

javascript php html ajax mysqli

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

您必须更改以及您正在使用的任何字段名称。我是假设的，因为你没有提供你的数据库模式。$star['x']$star['y']xy

-1赞 Ali 10/15/2023 #3

您可以分离您获取的页面并从数据库中获取数据，然后在每次页面加载或选择更改时使用 js 获取它们。也许这个解决方案对你有用

''' <script type=“text/javascript”> 函数 check_me（ ev ） { ev.preventDefault（）; var e = document.getElementById（ “starnumber” ）; var value = e.value; var text = e.options[ e.selectedIndex ].text; alert（ “星号： ” + 文本）;变量 c = 5;$.ajax（ { type： “POST”， url： “gstarcoords.php”， data： { 'c' ： c， 's' ： text }， success： function （ response ） { alert（'FETCH DATA COMPLETE '+response）; // 显示响应成功 } } ）;} </script> '''

0赞 Ali 10/16/2023

我的意思是你必须在另一个页面中分离获取数据，这意味着使用类似这样的东西，然后使用 ajax 在另一个页面中调用此数据

<?php  $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'],     ]; } ?>

0赞 ZJ Green 10/16/2023 #4

没关系，我已经糊涂了，可能有点粗糙，但任何关于清理它的想法将不胜感激，JS 不是我的第一语言。

例如，如何从 PHP 变量中设置变量“C”？

function check_me( ev ) {
            ev.preventDefault();
            var e = document.getElementById( "starnumber" );
            var value = e.value;
            var text = e.options[ e.selectedIndex ].text;
            //          alert( "Star Number: " + text );
            var c = 5;
            $.ajax( {
                type: "POST",
                url: "gstarcoords.php",
                data: {
                    'c': c,
                    's': text
                },
                success: function ( response ) {
                    // show response for success
                    let coords = response.split( ',' );
                    let xx = coords[ 0 ];
                    let yy = coords[ 1 ];
                    //alert( 'X = '+xx+'    Y = '+yy );
                    document.getElementById( "xcoord" ).value = xx;
                    document.getElementById( "ycoord" ).value = yy;
                }
            } );
        }
    </script>

更改 <select> 组件后如何从数据库更新表单字段

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

评论

评论

评论

评论

更改 &lt;select&gt; 组件后如何从数据库更新表单字段

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

评论

评论

评论

评论

更改 <select> 组件后如何从数据库更新表单字段