通过下拉列表选择值

时间:2016-11-02 11:28:43

标签: php jquery mysql

这是我到目前为止所尝试的。我打算根据下拉列表中的选择来填充文本框。随着下拉列表的更改,我希望文本框的值也会发生变化。

    <form class="form-horizontal" role="form" action="edit_task.php" method="post">                                                                         <div class="form-group">
                                                  <div class="col-lg-6">

                                                  <input class="form-control" type="hidden" id="id" name="id"  />
                                                  </div>
                                                  </div>


                                                  <div class="form-group">
                                                      <label class="col-lg-2 control-label">Plate Number</label>
                                                      <div class="col-lg-6">
                                                        <?php   $query = mysql_query("select * from vehicle"); // Run your query

                                                        echo '<select name="plateno" id="plateno">'; // Open your drop down box
                                                            // Loop through the query results, outputing the options one by one
                                                            while ($row = mysql_fetch_array($query)) {
                                                            echo '<option value="'.$row['plateno'].'">'.$row['plateno'].'</option>';
                                                                }

                                                        echo '</select>'; ?>
                                                      </div>
                                                  </div>


                                                          <input type="text" class="form-control" id="cartype" name="cartype" placeholder=" " required>


                                                          <input type="text" class="form-control" id="make" name="make" placeholder=" " required>
                                                      </div>
                                                  </div>


                                                          <input type="text" class="form-control" id="transmission" name="transmission" placeholder=" " required>

                                                          <input type="text" class="form-control" id="caryear" name="caryear" placeholder=" " required>

                                                          <input type="text" class="form-control" id="condition" name="condition" placeholder=" "  required>

                                                          <input type="text" class="form-control" id="task" name="task" placeholder=" "  required>

                                                          <input type="text" class="form-control" id="item_used" name="item_used" placeholder=" "  required>

                                                          <input type="text" class="form-control" id="remark" name="remark" placeholder=" " required>

                                                          <button type="submit" class="btn btn-primary">Save</button>
                                                          <button type="button" class="btn btn-danger">Cancel</button>
                                                      </div>
                                                  </div>
<script type="text/javascript">
      $(document).ready(function(){
   $('#plateno').change(function(){
   var plateno = $(this).val();
   var data_String;
    data_String = 'plateno='+plateno;
    $.post('ajax_file.php',data_String,function(data){
          var data= jQuery.parseJSON(data);
           $('#cartype').val(data.cartype)
           $('#make').val(data.make)
           $('#transmission').val(data.transmission)
           $('#caryear').val(data.caryear)

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

这是与json文件的连接 Ajax_file.php

<?php
       $plateno =$_POST['plateno']; 

     echo json_encode($data);
     exit();`

 ?>

4 个答案:

答案 0 :(得分:0)

在Ajax_file.php中编码的$ data没有值。您没有为其分配任何数据。您可能想要使用$ plateno并从数据库中获取记录并分配给$ data。

答案 1 :(得分:0)

用以下代码替换Ajax_file.php的代码:

<?php
       $plateno =$_POST['plateno']; 

     echo json_encode($plateno);
     die();

 ?>

除上述代码外,更改发送ajax请求的代码:

$.post('ajax_file.php',data_String,function(data){
          var data= jQuery.parseJSON(data);
           $('#cartype').val(data.cartype)
           $('#make').val(data.make)
           $('#transmission').val(data.transmission)
           $('#caryear').val(data.caryear)

       });

改为:

$.ajax({
    url: 'ajax_file.php',
    type: 'post',
    dataType:'json',
    data: {
        plateno: plateno
    }   
}).done(function(data){
    $('#cartype').val(data.cartype)
    $('#make').val(data.make)
    $('#transmission').val(data.transmission)
    $('#caryear').val(data.caryear)
});

可能的问题可能是您在发送数据时没有指定数据类型。 我希望它有所帮助

答案 2 :(得分:0)

以上是上述代码的工作示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#plateno').change(function() {
                var plateno = $(this).val();
                var data_String = 'plateno=' + plateno;
                $.get('json.php', data_String, function(result) {

                    $.each(result, function(){
                        $('#cartype').val(this.cartype);
                        $('#make').val(this.make);
                        $('#transmission').val(this.transmission);
                        $('#caryear').val(this.caryear);
                    });


                });
            });
        });
    </script>
    </head>
    <body>
  <?php     
  $con=mysqli_connect("localhost","root","","my_db"); 
  // Check connection
  if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
 ?>
 <form class="form-horizontal" role="form" action="edit_task.php" method="post">                                                                                     
  <div class="form-group">
        <div class="col-lg-6">
            <input class="form-control" type="hidden" id="id" name="id"  />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-2 control-label">Plate Number</label>
        <div class="col-lg-6">
            <?php
            $query = mysqli_query($con,"select * from vehicle"); // Run your query
            echo '<select name="plateno" id="plateno">'; // Open your drop down box
            // Loop through the query results, outputing the options one by one
            while ($row = mysqli_fetch_array($query, MYSQL_BOTH)) {
                echo '<option value="' . $row['plateno'] . '">' . $row['plateno'] . '</option>';
            }
            echo '</select>';
            ?>
        </div>
    </div>
    <input type="text" class="form-control" id="cartype" name="cartype" placeholder=" " required>
    <input type="text" class="form-control" id="make" name="make" placeholder=" " required>
    <input type="text" class="form-control" id="transmission" name="transmission" placeholder=" " required>
    <input type="text" class="form-control" id="caryear" name="caryear" placeholder=" " required>
    <input type="text" class="form-control" id="condition" name="condition" placeholder=" "  required>
    <input type="text" class="form-control" id="task" name="task" placeholder=" "  required>
    <input type="text" class="form-control" id="item_used" name="item_used" placeholder=" "  required>
    <input type="text" class="form-control" id="remark" name="remark" placeholder=" " required>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-danger">Cancel</button>
    </form>

  </body>
 </html>

这是你的ajax_file.php代码:

<?php
header('Content-Type: application/json');
$response = array();
if (isset($_GET['plateno'])){
//vul hier je database gebuikersnaam en ww in
$con=mysqli_connect("localhost","root","","my_db");
// Check connection
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$qry = "SELECT * FROM vehicle WHERE plateno = '".$_GET['plateno']."'";

$result = mysqli_query($con, $qry);  //mysql_query($qry);

while ($row = mysqli_fetch_array($result, MYSQL_BOTH)) {
    array_push($response, $row);
}

echo json_encode($response);
} 
?>

答案 3 :(得分:0)

$plateno = $_POST['plateno']; 
if (isset($plateno)){
    $con=mysqli_connect("localhost","root","","dn_name");

if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$qry = "SELECT * FROM vehicle WHERE plateno = '".$plateno."'";

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

while ($row = mysqli_fetch_array($result, MYSQL_BOTH)) {
     array_push($response, $row);
}

echo json_encode($data);
}