Using AJAX How can I generate selections for a dropdown menu based on records available in a database?.
How can then use these selections to prefill a form with record/row data from a database when selected?
Heres a mock up I created of what I'm trying to do:
http://oi58.tinypic.com/2urb2ae.jpg
PHP FILE: contact_form.php
-----------------------------------------------------------
<?php
define('DB_NAME', 'xxx');
define('DB_USER', 'xxx');
define('DB_PASSWORD', 'xxx');
define('DB_HOST', 'xxx');
$connection = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$connection){
die('Database connection failed: ' . mysqli_connect_error());
}
$db_selected = mysqli_select_db($connection, DB_NAME);
if(!$db_selected){
die('Can\'t use ' .DB_NAME . ' : ' . mysqli_connect_error());
}
echo 'Connected successfully';
if (isset($_POST['itemname'])){
$itm = $_POST['itemname'];
}
else {
$itm = '';
}
if($_POST['mile']){
$mi = $_POST['mile'];
}else{
echo "Miles not received";
exit;
}
if($_POST['email']){
$email = $_POST['email'];
}else{
echo "email not received";
exit;
}
$sql = "INSERT INTO seguin_orders (itemname, mile, email)
VALUES ('$itm', '$mi', '$email')";
if (!mysqli_query($connection, $sql)){
die('Error: ' . mysqli_connect_error($connection));
}
CONACT FORM: formz.php
------------------------------------------------------------------------------
<html>
<header>
</header>
<body>
<form action="/demoform/contact_form.php" class="well" id="contactForm" method="post" name="sendMsg" novalidate="">
<big>LOAD PAST ORDERS:</big>
<select id="extrafield1" name="extrafield1">
<option value="">Please select...</option>
<?php
$email = $_POST['email'];
$query="select * from tablename WHERE email={$_POST['email']}";
$res=mysqli_query($connection,$query);
while($row = mysqli_fetch_assoc($res))
{
?>
<option value="<?php echo $row['fieldname']; ?>"><?php echo $row['fieldname']; ?></option>
<?php
}
?>
</select>
</br>
<input type="text" required id="mile" name="mile" placeholder="Miles"/>
</br>
<input id="email" name="email" placeholder="Email" required="" type="text" value="demo@gmail.com" readonly="readonly"/>
</br>
<input id="name" name="itemname" placeholder="ITEM NAME 1" required="" type="text" />
</br>
<input type="reset" value="Reset" />
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
Using an exemple, let's assume you want to fill the "name" select based on the option selected at the "gender" select:
<select name="gender" id="gender">
<option value="m">Male</select>
<option value="f">Female</select>
</select>
When nothing is selected yet, the "name" select is empty:
<select name="name" id="name">
<option value="NULL">Please select a gender first</option>
</select>
So, what you gotta do is: when the gender select got some selection, you populate the name select with values based on the gender select option.
$(document).ready(function() {
$('select#gender').change(function(){
$('select#name').load('LOAD_NAMES_BASED_ON_GENDER.php?gender='+$(this).val());
});
});
And your PHP file responsible for loading the names based on gender should look like:
$gender = $_GET['gender'];
$list = // the way you retrieve your list of names from your DB
And then you loop this $list into an list of options, such like:
foreach($list as $key=>$value)
echo '<option value="$key">$value</option>';
This simple. PS: the load() function is kind of an alias for the $.ajax request, given that the only purpose here is to retrieve data.