How to Make data automatically fill the form after selecting from dropdown menu

Question

So i'm creating a Customize form so that i can edit my user data using a page. I have a dropdown menu which is contain username from database.

What im gonna do is , when i click the username i want to costumize , all data of the username goes into the form below it ( like email,password,etc )

This pict explain what i wanted to do

This is my dropdown code :

 <h1>Costumize Data</h1>
        <hr>
        <dl><dt>Select data to costumize</dt></dl>
        <select class="form-control" name="userlist">
            <?php
               $servername = "localhost";
               $username = "root";
               $password = "";
               $dbname = "gamestore";

            // Create Connection
            $conn = mysqli_connect($servername, $username, $password, $dbname);

            // Check connection
            if (!$conn) {
                trigger_error("Connection failed: " . mysqli_connect_error());

            }
            //Run Query
            $stmt = "SELECT DISTINCT `username` FROM `login` ORDER BY user_id ASC";
            $result = mysqli_query($conn,$stmt) or die(mysqli_error($conn));
            while(list($category) = mysqli_fetch_row($result)){
                echo '<option value="'.$category.'">'.$category.'</option>';
            }
            mysqli_close($conn);
            ?>

        </select>
        <hr>

And this is my form

<form class="form-horizontal" method="post" action="edit_user.php">
  <div class="form-group">
    <label class="control-label col-sm-4" for="username">Username:</label>
    <div class="col-sm-6">
      <input type="username" class="form-control" name="username" placeholder="Enter username">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-4" for="email">Email:</label>
    <div class="col-sm-6"> 
      <input type="email" class="form-control" name="email" placeholder="Enter email">
    </div>
  </div>
    <div class="form-group">
    <label class="control-label col-sm-4" for="country">Country:</label>
    <div class="col-sm-6"> 
      <input type="country" class="form-control" name="country" placeholder="Enter Country">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-4" for="password">Password:</label>
    <div class="col-sm-6"> 
      <input type="password" class="form-control" name="password" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 

<label class="control-label col-sm-4" for="user_type">Level:</label>
<div class="col-sm-4"> 
<select class="form-control" name="user_type">
    <option value="user">User</option>
    <option value="admin">Admin</option>
</select>
</div>
</div><div class="form-group"> 
    <div class="col-sm-offset-4 col-sm-7">
      <a href="delete_user.php"><button type="submit" class="btn btn-default">Delete</button></a>
      <button type="submit" class="btn btn-primary">Edit</button>
    </div>
  </div>
</form>

Thank you before !

you will need to write javascript for that. Basically you load the form inputs based on the selection. — Rotimi, Mar 31 '17 at 11:40
possible duplicate of http://stackoverflow.com/questions/28091038/dynamically-populate-a-field-based-on-dropdown-selection-javascript-html — Rotimi, Mar 31 '17 at 11:41
thank you for the follow up sir, do you have any resource to learn javascript for what i need ? — Bagus Amrullah Fikri, Mar 31 '17 at 12:01
check out the link i posted. it will put you in the right direction — Rotimi, Mar 31 '17 at 12:01

score 1 · Answer 1 · answered Mar 31 '17 at 12:01

First thing: Never, look, NEVER put the DB rules into frontend. Create other file and put the content there.

Second: You have one elegant way to do this: Use ajax calling to a php file with to routing/factoring the user object with the data to retrieve to your modal.

Put a bind into dropdown when event change is triggered, call the ajax function, retrieve the data with your db routine returning the user object and on the success callback put that object content into frontend using

document.getElementsByTag/ByName/getElementById.value

, etcetera.

To study what you need, take that: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

How to Make data automatically fill the form after selecting from dropdown menu

1 Answers1