0

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

Bradley Hack
  • 1
  • 1

2 Answers2

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!

Khattu Developer
  • 99
  • 7
  • 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 – Bradley Hack Nov 06 '17 at 22:38
  • Drop `async : false` and also you're making POST request and in PHP file you used `$_GET`, please check my code closely. – Khattu Developer Nov 07 '17 at 05:42
  • Thank you for helping me here. I must be missing something as I now have exactly what you have but still no go... :-( – Bradley Hack Nov 07 '17 at 11:38
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
Stephen T
  • 1
  • 1
  • 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. – Bradley Hack Nov 03 '17 at 13:44