javascript - 如何根据下拉菜单选择值预填表单？

Question

我有一个表单，其中有一个下拉选择菜单，可以从我的数据库中加载发票 ID。我正在尝试根据从下拉菜单中选择的发票值(value)来预填写我的表格。在我的数据库中有一列“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

看来您的错误来源是您通过 ajax 发送到 php 的 json 数据。您应该尝试将数据键括在引号中，这样 javascript 就不会用变量值替换它。

   data: {
       'invoiceidcopy': invoiceidcopy
   }

错误的另一个可能来源是从表中选择记录的 sql。您是否尝试过像这样从变量名中删除括号

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

甚至使用大括号

 $query = "SELECT txt1, txt2, q1
        FROM seguin_orders
  WHERE invoiceidcopy = {$invoiceidcopy}";

另外，最好在将值发送到 php 之前检查它，以确保它是您所期望的。例如，您可以执行以下操作:

 e.preventDefault();
    var invoiceidcopy = $('#dropdown-select').val();
    alert(invoiceidcopy); /*display the value to confirm it is correct */
    // use the javascript console
    console.log(invoiceidcopy);