Autopopulate form fields with mysql values based on dropdown selection

Question

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

Khattu Developer · Accepted Answer · 2017-11-03 11:50:32Z

1

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!

answered Nov 3, 2017 at 11:50

Khattu Developer

997 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bradley Hack Over a year ago

I still don't have a working piece of code here. I don't see what I am doing wrong. I have posted again on this page my revised code. Please help

Khattu Developer Over a year ago

Drop async : false and also you're making POST request and in PHP file you used $_GET, please check my code closely.

Bradley Hack Over a year ago

Thank you for helping me here. I must be missing something as I now have exactly what you have but still no go... :-(

Stephen T · Accepted Answer · 2017-11-03 12:06:43Z

0

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

answered Nov 3, 2017 at 12:06

Stephen T

11 bronze badge

1 Comment

Bradley Hack Over a year ago

Thank you for the quick response. However, I am still struggling to get this to work. I have tried both your answer and the second.

Collectives™ on Stack Overflow

Autopopulate form fields with mysql values based on dropdown selection

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related