javascript - 如何根据下拉菜单选择使用数据库中的数据预填充表单？

Question

您好，我一直在尝试弄清楚如何根据下拉菜单中的选择使用数据库中的数据预填充我的数据。已经研究了几个星期了，无法弄清楚...非常感谢任何人的帮助。

我有一个表单，其中有一个下拉选择菜单，可以从我的数据库加载发票 ID。我正在尝试根据所选发票 ID 的值预填写表单。

在我的数据库中，“invoiceidcopy”列数据显示为下拉菜单下每个不同记录/行值的选择。

如果您在下面的数据库表图像中注意到，您会注意到第一行/记录的invoiceidcopy字段是空白的..因此...在我的下拉菜单中...第一个选择是空白的。

最终，我下面的代码仅在我从下拉菜单中选择空白选项时才有效，但不适用于其他 2 个选项？

我的代码有什么问题和/或任何人知道实现此目的的不同方法......谢谢。

表格

<form action="#">

<select id="dropdown-select" name="dropdown-select">
<option value="">-- Select One --</option>
</select>

<button id="submit-id">Prefill Form</button>

<input id="txt1" name="txt1" type="text">
<input id="txt2" name="txt2" type="text">



<button id="submit-form" name="Submit-form" type="submit">Submit</button>


</form> 

脚本

<script>
     $(function(){


        $('#submit-id').on('click', function(e){  


            var invoiceidcopy = $('#dropdown-select').val();
            e.preventDefault(); 

             $.ajax({
              url: "/tst/orders2.php",
              data: {
                'invoiceidcopy': invoiceidcopy
              }
            }).done(function(data) {

    data = JSON.parse(data);

$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);


});
        });
     });
</script>

/tst/orders2.php

<?php

// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");


// Check if the connection failed
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  die();
}

   if (isset($_GET['invoiceidcopy']))
{
    $invoiceidcopy= $_GET['invoiceidcopy'];

   $query = "SELECT txt1, txt2, q1
        FROM seguin_orders
  WHERE invoiceidcopy = '".$invoiceidcopy."'";

    $result = mysqli_query($con,$query);

    while ($row = mysqli_fetch_assoc($result)) 
        {
 echo json_encode($row);
 die(); 
    }
}
?>

Answer 1

就像小黄人所说的那样，作为invoiceidcopy发送的到底是什么？据我所知，选择最后一个应该准确地发送“这是一个测试 2759f633-d6cb-4b3e-b4dc-3a4d0b54367...”。最好为此字段提供另一个较短的 key ，例如“ThisIsATest-2759f633”或“ThisIsATest-201502070057”。另请记住，您需要清理输入以防止 SQL 注入(inject)。尽管它是一个下拉列表，但有人可以使用 HTML 来更改变量。