pre fill text fields (in form) based on value selected from dynamic drop down box

Question

I will start off by saying I am new to coding so i find this very difficult, also i have asked a few questions recently, mainly because i am REALLY STUCK, so all help is really appreciated.

I have two tables. Employee (Employee_ID, First_name, Last_name, Address etc) and Training (Training_ID, Employee_ID, First_name, Last_name, Training_type).

For the training table, I have a form in which is meant to be filled out to assign a training type for an employee.

OK currently, the dropdown box,for employee ID, has the values of the employee ID from the employee table.

When i chose a value from the drop down box, i would like for the text fields in the form (firstname & Lastname) to update showing the names for that employee_id. I have searched online but have NO idea how to do this.

Below shows my form (php)

<html>
   <?php
      $con = mysql_connect("localhost","root","");
      if (!$con)
      {
         die('Could not connect: ' . mysql_error());
      }

      mysql_select_db("hrmwaitrose", $con);
   ?>
   <head>
      <link type="text/css" rel="stylesheet" href="style.css"/>
      <title>Training</title>
   </head>

   <body>
      <div id="content">  
      <h1 align="center">Add Training</h1>

      <form action="inserttraining.php" method="post">
         <div>
            <p>Training ID: <input type="text" name="Training_ID"></p>
            <p>Employee ID:<select id="Employee_ID">
            <?php
               $result = mysql_query("SELECT Employee_ID FROM Employee");
               while ($row = mysql_fetch_row($result)) {
                  echo "<option value=$row[0]>$row[0]</option>";
               }
            ?>
            </select>
            <p>First name: <input type="text" name="First_name"></p>
            <p>Last name: <input type="text" name="Last_name"></p>
            <p>
               Training required?
               <select name="Training">
                  <option value="">Select...</option>
                  <option value="Customer Service">Customer Service</option>
                  <option value="Bailer">Bailer</option>
                  <option value="Reception">Reception</option>
                  <option value="Fish & meat counters">Fish & meat counters</option>
                  <option value="Cheese counters">Cheese counters</option>
               </select>
            </p>
            <input type="submit">
         </form>
      </div>

   </body>
</html>

And here is my php code for when the submit button is pressed.

<?php
   $con = mysql_connect("localhost","root","");
   if (!$con)
   {
      die('Could not connect: ' . mysql_error());
   }

   mysql_select_db("hrmwaitrose", $con);

   $sql="INSERT INTO training (Training_ID, Employee_ID, First_name, Last_name, Training)
         VALUES
         ('$_POST[Training_ID]','$_POST[Employee_ID]','$_POST[First_name]','$_POST[Last_name]','$_POST[Training]')";


   if (!mysql_query($sql,$con))
   {
      die('Error: ' . mysql_error());
   }
   echo "1 record added";

   mysql_close($con);
?>

I think its done by java? not too sure.

if you want to do it nice and dynamic you will need to look at AJAX — Daniel Kurz
– Daniel Kurz, Commented Mar 1, 2013 at 14:51
any chance you can give me some assistance with AJAX? sorry, programming is not my best skill! — user2108411
– user2108411, Commented Mar 1, 2013 at 14:53

Cito · Accepted Answer · 2013-03-01 15:36:30Z

3

Your view file:

<?php
// First of all, don't make use of mysql_* functions, those are old
$pdo = new PDO("mysql:host=localhost;dbname=hrmwaitrose;charset=utf8", "root", "");
?>
<html>
<head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- You will need jQuery (or anyother javascript framework) to accomplish your goal cause you need ajax -->
        <title>Training</title>
    </head>

    <body>
        <div id="content">
            <h1 align="center">Add Training</h1>

            <form action="inserttraining.php" method="post">
                <div>
                    <p>
                        Training ID:
                        <input type="text" name="Training_ID">
                    </p>
                    <p>
                        Employee ID:
                        <select id="Employee_ID">
                            <option value="">Select one</option>
                            <?php
                            $st = $pdo->prepare("SELECT Employee_ID FROM Employee");
                            $st->execute();
                            $rows = $st->fetchAll(PDO::FETCH_ASSOC);
                            foreach ($rows as $row) {
                                ?><option value="<?php echo $row ['Employee_ID']; ?>"><?php echo $row ['Employee_ID']; ?></option><?php
                            }
                        ?>
                        </select>
                    <p>
                        First name:
                        <input type="text" name="First_name" id="First_name">
                    </p>
                    <p>
                        Last name:
                        <input type="text" name="Last_name" id="Last_name">
                    </p>
                    <p>
                        Training required?
                        <select name="Training">
                            <option value="">Select...</option>
                            <option value="Customer Service">Customer Service</option>
                            <option value="Bailer">Bailer</option>
                            <option value="Reception">Reception</option>
                            <option value="Fish & meat counters">Fish & meat counters</option>
                            <option value="Cheese counters">Cheese counters</option>
                        </select>
                    </p>
                    <input type="submit">
            </form>
        </div>
    <script type="text/javascript">
        $(function() { // This code will be executed when DOM is ready
            $('#Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
                var $self = $(this); // We create an jQuery object with the select inside
                $.post("getEmployeeData.php", { Employee_ID : $self.val()}, function(json) {
                    if (json && json.status) {
                        $('#First_name').val(json.name);
                        $('#Last_name').val(json.lastname);
                    }
                })
            });
        })
    </script>
    </body>
</html>

Your getEmployeeData.php file:

<?php
$pdo = new PDO("mysql:host=localhost;dbname=hrmwaitrose;charset=utf8", "root", "");

header("Content-Type:application/json; Charset=utf-8");

// As you can see, here you will have where Employee_ID = :employee_id, this will be
// automatically replaced by the PDO object with the data sent in execute(array('employee_id' => $_POST['Employee_ID']))
// This is a good practice to avoid SqlInyection attacks
$st = $pdo->prepare("SELECT First_name, Last_name FROM Employee WHERE Employee_ID = :employee_id");
$st->execute(array ('employee_id' => $_POST['Employee_ID']));
$data = $st->fetch(PDO::FETCH_ASSOC);

echo json_encode(array ('status' => true, 'name' => $data ['First_name'], 'lastname' => $data ['Last_name']));

Some last suggestions: indent the code correctly. Close every html tag (<input /> for example)

edited Mar 1, 2013 at 15:36

answered Mar 1, 2013 at 15:03

Cito

1,7093 gold badges22 silver badges49 bronze badges

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

12 Comments

user2108411 Over a year ago

Thank you for the help, you comments help alot! although, when i use the above code, the form only shows training_ID, and Employee_ID fields, and the employee_ID drop down box now contains no values?

user2108411 Over a year ago

just realised, i need to download jquery?

Cito Over a year ago

Can you include your database? I've not tested the code, if you upload at least one row of your db, I can test it and see where the problem is :)

Cito Over a year ago

No, it is being include from google, the problem of not showing data is with the query being executed.

user2108411 Over a year ago

Cheers mate, i figured out what was wrong, i was just being stupid. THANK YOU for your help so much!

|

JoDev · Accepted Answer · 2013-03-01 14:55:35Z

1

In a simple way, you hav to implement a little ajax method (with jQuery for example) who will be triggered on the onchange attribute of your dropdown list.

$('select').change(function() {
    var choice = jQuery(this).val();
    $.ajax({
    url:'fakeurl.test.php',
    type:'POST'
    data : {'id' : choice},
    success : function(response) {
        $('input[name="First_name"]').val(response.firstname);
        $('input[name="Last_name"]').val(response.lastname);
    }
    });
});

And of course, in your PHP

$id = $_POST['id'] ;
SELECT...WHERE employee_id = $id...
[...]
return json_encode(array(
     'lastname'=>$employee_lastname,
     'firstname'=>$employee_firstname
));

answered Mar 1, 2013 at 14:55

JoDev

6,9231 gold badge25 silver badges37 bronze badges

1 Comment

user2108411 Over a year ago

sorry mate, I am confused on how i implement that code^^ into my code, do you mind explaining where i insert it? or adding it to my code?. Really appreciate the help.

Collectives™ on Stack Overflow

pre fill text fields (in form) based on value selected from dynamic drop down box

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related