CODEWITHSUNDEEP
phpjquerydrop-down-menu
Lydia
Lydia

Reputation: 2117

Fill textbox when click a button according to dropdown selection in php jQuery

My process is like this: I have a dropdown menu and text box. When I select an id (unique id) from dropdown and then click submit button want to display corresponding name to text box.

My database fields :

  1. id (Auto increment)
  2. AgencyName_id (unique id)
  3. Name

dispay.html

<select name="agencyID_dwn" class="idLookup_dwn"  id="agencyID_dwn" >
<option selected>...Select...</option>
  <?php
  while($row = mysqli_fetch_array($result)){
  ?>

   <option value="<?php echo $row['AgencyName_id'];?>"> 
   <?php echo $row['AgencyName_id'];?></option>
 <?php
  }
   ?>
    </select>
        // for input text
        <input type="text" id="testid">
        // submit button
         <input type="submit" name="lookupSubmit">

dataGet.php

            <?php
            if (isset($_POST["lookupSubmit"])) {

            $user_id=$_POST['agencyID_dwn'];

             $query = "select * from AgencyHome where AgencyName_id = '$user_id'" ;
        $result=mysqli_query($db, $query);

        $data =  mysqli_fetch_assoc($result);

       echo json_encode($data);
         exit();

       }

        ?>

myjson.js

           <script src="//code.jquery.com/jquery-1.11.2.min.js">                </script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js">  </script>
    <script type="text/javascript">
      $(document).ready(function(){

      $('#agencyID_dwn').change(function(){

    var reg_number = $(this).val();
      var data_String;
     data_String = 'reg_number='+reg_number;
    $.post('dataGet.php',data_String,function(data){
      var data= jQuery.parseJSON(data);

       $('#testid').val(data.Name);


          });
       });
      });

      </script>

When i click submit button I got the database results as array in "dataGet.php".But in textbox did not display the result.Any mistake in my code?

Upvotes: 1

Views: 1823

Answers (2)

Vishal Wadhawan
Vishal Wadhawan

Reputation: 1085

here is your answer

your index.php

    <?php
    $conn = mysqli_connect("localhost","root","","test_db");

 ?> 

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js">                     </script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js">  </script>
 <script type="text/javascript">
  $(document).ready(function(){

  $('#agencyID_dwn').change(function(){

var reg_number = $(this).val();
  var data_String;
 data_String = 'reg_number='+reg_number;
$.post('dataGet.php',data_String,function(data){
    console.log(data);
  var data= jQuery.parseJSON(data);

   $('#testid').val(data.Name);


      });
   });
  });

  </script>


<body>
<form>
<select name="agencyID_dwn" class="idLookup_dwn"  id="agencyID_dwn" >
<option selected>...Select...</option>
 <?php
  $query = "select AgencyName_id from AgencyName";
 $result = mysqli_query($conn,$query);
 while($row = mysqli_fetch_array($result)){
  ?>

   <option value="<?php echo $row['AgencyName_id'];?>"> 
   <?php echo $row['AgencyName_id'];?></option>
  <?php
   }
   ?>
    </select>
    // for input text
    <input type="text" id="testid">
    // submit button
       <input type="submit" name="lookupSubmit">
  </form>
 </body>
 </html>

and your dataGet.php file as bellow

     <?php

   $conn = mysqli_connect("localhost","root","","test_db");

        $reg_number=$_POST['reg_number'];

   $query = "select * from AgencyName where AgencyName_id = '$reg_number'" ;
    $result=mysqli_query($conn, $query);

    $data =  mysqli_fetch_assoc($result);
   // print_r($data);
      echo json_encode($data);
     exit();


    ?>
     just ccheck your table name and all will work

Upvotes: 1

Ayyanar G
Ayyanar G

Reputation: 1545

try like this in dataGet.php,

while ($row = mysqli_fetch_assoc($result)) {
    echo $row["Name"];
}

Upvotes: 2

Related Questions