CODEWITHSUNDEEP
phpjqueryhtmlmysql
Bradley Hack
Bradley Hack

Reputation: 1

Autopopulate form fields with mysql values based on dropdown selection

I have a basic form that I would like to have other fields appear underneath such as email address and job title when the user is selected from the drop down.

The process will be:

User selects name from the drop down PHP, JQUERY to query mysql database where user is equal to the selection from dropdown Email address and Job Title fields to appear underneath with populated information.

My JQuery doesn't seem to work on my page...

I have used the code from this Stack Overflow question in which my reply was removed because it was not a 'solution': Populate input fields with values when option is selected - php mysql

Any help on this would be appreciated!

self_submit.html

<html>
<head>
<title>TEST</title>
        <script>
$(document).ready(function(){
    $('#user').on('change',function(){
    var user = $(this).val();
    $.ajax({
        url : "getUser.php",
        dataType: 'json',
        type: 'POST',
        async : false,
        data : { user : user},
        success : function(data) {
            userData = json.parse(data);
            $('#age').val(userData.age);
            $('#email').val(userData.email);
        }
    }); 
    });
});
</script>
</head>
<body>
  <form>        
    User
    <select name="user" id="user">
      <option>-- Select User --</option>
      <option value="username1">name1</option>
      <option value="username1">name2</option>
      <option value="username1">name3</option>
    </select> 

            <p>
      Age 
      <input type="text" name="jobtitle" id="jobtitle">
    </p>
    <p>
      Email 
      <input type="text" name="email" id="email">
    </p>
    </form>

</body>
</html>

getUser.php

<?php
$link = mysqli_connect("localhost", "root", "", "test");

$user = $_GET['user'];

$sql = mysqli_query($link, "SELECT jobtitle, email FROM tblusers WHERE username = '".$user."' ");
$row = mysqli_fetch_array($sql);


json_encode($row);die;
?>

Thanks in advance

Upvotes: 0

Views: 1232

Answers (2)

Stephen T
Stephen T

Reputation: 1

Define "POST" method in form tag

  • download jquery library for offline use or use google cdn or microsoft -then reference it in head html tag
    • change the data in ajax to data: "user="+user, am used to this format
    • lastly use proper id names correctly, incorrectly referencing 'ids', you reference in html email id = $('#jobtitle').val(userData.age); instead of
      $('#email').val(userData.age) this is fine => $('#email').val(userData.email); $user = $_GET['user']; change to $user = $_POST['user']; These are some mistake I observed without running you code if still you run into problems ask then

Upvotes: 0

Khattu Developer
Khattu Developer

Reputation: 99

you need to change your ajax call to:

$.ajax({
  url : "getUser.php",
  dataType: 'json',
  type: 'POST',
  data : { user : user },
  success : function(data) {
      userData = json.parse(data);
      // $('#age').val(userData.age);
      $('#jobtitle').val(userData.jobtitle);  // Since you are selecting jobtitle, not age
      $('#email').val(userData.email);
  }
});

And also you forgot to echo your data:

<?php
$link = mysqli_connect("localhost", "root", "", "test");

$user = $_REQUEST['user'];

$sql = mysqli_query($link, "SELECT jobtitle, email FROM tblusers WHERE username = '".$user."' ");
$row = mysqli_fetch_array($sql);


echo json_encode($row);
exit();
?>

Hope this helps!

Upvotes: 1

Related Questions