How to auto populate input fields based on selected item.

Question

I am trying to create a email form that upon the selection of the users name in the drop down list it populates the users email address in the input field for email. Later I will add a phone number and address field the will auto populate as well. When I use the coide below it just adds input fields with all the email addresses in the array.

    $users = array();
        $users [100] = array(
        "Name" => "Bob Smith",
        "Email" => "bob.smith@email.com",
        "Phone" => "555-555-5555",
        "Address" => "17655 waterview Parkway ",
        "City" => "Somewhere",
        "State" => "Texas",
        "Zip" => "75555"
        );
        $users [101] = array(
        "Name" => "Bob Williams",
        "Email" => "bob.williams@email.com",
        "Phone" => "555-555-5555",
        "Address" => "17655 waterview Parkway ",
        "City" => "Somewhere",
        "State" => "Texas",
        "Zip" => "75555"
        );
<fieldset>

     <select name="priname" id="priname" >
            <option value="disabled" selected style='display:none;' >Select User *</option>
              <?php foreach($users as $user){?>
            <option><?php echo $user["Name"];?></option>
         <?php } ?>
       </select>

<input type="email" name="sender" required placeholder="Email Address *" value="<?php echo $user["Email"]; ?>">

</fieldset>

Answer 1 · 2014-08-12T16:36:19Z

August 12, 2014 4:36pm

PHP is a server side language - the server will run through the php code and output html onto the screen. So when you foreach around the user names, you'll see the field returns populated with all names in the array. The email field won't update like you want it to because when the user selects an option, the information won't be passed back to the server until you submit the form.

To get this functionality without a page reload, you'll need javascript (maybe AJAX) so you can update a field without refreshing the page. You'll need to enter the array into a format javascript can read from JSON.

BUT you have to have a php fallback in case JavaScript is turned off. For this you'll need to submit the persons name first to the server (POST is probably best). You can then populate another form with the information associated with that user, or you could put the user ID into a session and you can access it from whereever you want.

I hope this helps! If you need me to clarify anything, just let me know

Welcome to the Treehouse Community

Looking to learn something new?

Fabian Wilson

Fabian Wilson

How to auto populate input fields based on selected item.

1 Answer

thomascawthorn

thomascawthorn