Php: autocomplete inputs when mysql table element selected

Question

0.00/5 (No votes)

See more:

I'm building a simple app to send confirmation emails. I have a MySQL table with 4 columns: id, user_email, user_name and user_track. The form consists of a selectbox that shows all the user_email stored and two text inputs that should be autocompleted when an email is selected.

What I have tried:

I have tried the following, but it just echo's all the entries for user_track and user_name.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_db";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, user_email, user_name, user_track FROM demo_data ORDER BY id DESC";
$option = '';
$artist = '';
$track = '';
$result = $conn->query($sql);

while($row = $result->fetch_assoc()){
    $option .= '<option value = "'.$row['user_email'].'">'.$row['user_email'].'</option>';
    $track .= '<input type="text" name="track" required value = "'.$row['user_track'].'">';
    $artist .= '<input type="text" name="artist" required value = "'.$row['user_name'].'">';
}
?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Admin</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
    <h1>Accepted demo</h1>
<form action="demo.php" method="post">
 <select name="select"> 
<?php echo $option; ?>
</select><br><br>
<?php echo $track; ?><br><br>
<?php echo $artist; ?><br><br>
<input type="date" name="date" placeholder="Release Date" required>
<br><br>
<input style="margin-top:10px;" class="btn" type="submit" value="Send email">
</form>
</body>
</html>
<?php
$conn->close();
?>

Posted 30-Apr-19 4:48am

arnaujimenez

Updated 30-Apr-19 5:06am

Add a Solution

Comments

phil.o 30-Apr-19 10:54am

Why an option element when an input would be more suitable? There is only one choice for the email anyway.

arnaujimenez 30-Apr-19 10:56am

Becuase the table contains multiple emails stored from a submission form. And when I select the email in the selectbox, I want the other fields to be filled automatically with the info of the other 2 columns.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2019-04-30T05:06:00

Solution 1

You'd need to look at using Javascript here because a basic page can't do this by itself. You can do this by leveraging the data- attributes. Something akin to this: JSFiddle[^]

If you're using a library like jQuery then the actual JS logic would be much simpler, and would require minimal effort.

Posted 30-Apr-19 5:06am

Chris Copeland

Comments

arnaujimenez 30-Apr-19 12:10pm

That worked, thank you so much. I've been at it for the whole day... I have to point out that linking the JS file didn't work and had to add the script before closing the body tag.