使用Ajax如何将表单中的下拉菜单选择值与数据库中的记录进行匹配,并获取相关记录/行以预填表单?

时间:2015-01-27 15:48:57

标签: javascript php jquery mysql ajax

我有一个带有选择的下拉菜单...我需要将选择的值与我的数据库中的列(invoiceid)下的值相匹配,然后获取相关的记录/表格数据行以预先填写单击我的预填充按钮时形成。以下就我而言,即便如此,我觉得我很接近。我无法弄清楚我缺少什么或如何使这个代码工作。非常感谢并提前感谢任何人的帮助。

FORM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<form action="#">


        <select name="dropdown-select" id="dropdown-select">
            <option value="invoiceidselection1">invoiceidselection1</option>
            <option value="invoiceidselection2">invoiceidselection2</option>
        </select>

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


        <input id="location" name="location" required="" type="text">

        <input onclick="change" id="q1" name="q1" value="4.99" checked="checked" type="radio">

        <input name="subcheck" value="0" type="hidden">
        <input id="subcheck" name="subcheck" value="1" onclick="return false" checked="" type="checkbox">Agree to Terms of Service


    <button id="btn1" type="submit" name="Submit">Submit</button>


</form>




<script src="http://code.jquery.com/jquery.min.js"></script>

<script>
     $(function(){


        $('#submit-id').on('click', function(e){  // Things to do when 'Submit Id' button is clicked
            var invoiceid = $('#dropdown-select').val(); // Grab user id from text field
            e.preventDefault(); // Prevent form from submit, we are submiting form down with ajax.

             $.ajax({
              url: "orders.php",
              data: {

               }
            }).done(function(data) {
data = JSON.parse(data);
$('#location').val(data.location);
$('#q1').val(data.q1);
$('#subcheck').val(data.subcheck);
});
        });
     });
</script>
</body>
</html>

orders.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['dropdown-select']))
{
    $dropdown-select= $_GET['dropdown-select'];

   $query = "SELECT location, q1, subcheck
        FROM seguin_orders
  WHERE invoiceid = '".($dropdown-select)."'";

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

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


    ?>

1 个答案:

答案 0 :(得分:0)

while ($row = mysqli_fetch_assoc($result))c{
 echo json_encode($row);
 die(); // assuming there is just one row
}

现在在JavaScript端

.done(function(data) {
    data = JSON.parse(data);
    $('#location').val(data.location);
    $('#q1').val(data.q1);
    $('#subcheck').val(data.subcheck);
});

我假设该表格包含以下列locationq1subcheck

<强>编辑

您还需要使用您的请求发送get参数。在$.ajax。将data设置为:

    {
        'dropdown-select': invoiceid
    }

最好使用$.get

$.get('orders.php', {
     'dropdown-select': invoiceid
 }).done(function (data) { .....});

如果仍然无效..删除data=JSON.parse(data)

希望现在有效。