I have done quite a bit of research on this one with no success. So what I'm currently looking to do is:
The Database object is an Album an has the following properties
+-------------+-------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------------+-------------+------+-----+---------+----------------+
| AlbumID | int(11) | NO | PRI | NULL | auto_increment |
| AlbumName | varchar(75) | YES | | NULL | |
| Label | varchar(75) | YES | | NULL | |
| Genre | varchar(30) | YES | | NULL | |
| ReleaseDate | date | YES | | NULL | |
| Artist | varchar(75) | YES | | NULL | |
+-------------+-------------+------+-----+---------+----------------+
The HTML I'm currently trying to work with is this:
<!DOCTYPE HTML>
<html>
<head>
<title>MyMuzik Library</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="content/site.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/mask.js"></script>
<script type="text/javascript">
jQuery(function($){
$("#txtReleaseDate").mask("9999/99/99",{placeholder:"yyyy/mm/dd"});
});
</script>
</head>
<body>
<form action="insertAlbum.php" method="post">
<div class="nav">
<ul>
<li><a href="fphome.php">Home</a></li>
<li><a href="fpsongs.php">Songs</a></li>
<li><a href="#">Albums</a></li>
</ul>
</div>
<div class="content-container">
<form action="insertAlbum.php" method="post" autocomplete="off">
<h1>Albums</h1>
<h3>This is where you add new albums</h3>
<div class="form-group">
<label for="ddlAlbumSelect" id="lblAlbumSelect">Select Album to Edit:</label>
<div class="form-control">
<select name="ddlAlbumSelect" id="ddlAlbumSelect">
<option value="0"> Select Album...</option>
<?php
mysql_connect('localhost', 'root', '1978afc247a');
mysql_select_db('finalproject');
$sql = mysql_query("SELECT * FROM albums ORDER BY AlbumName");
while ($row = mysql_fetch_array($sql)){
echo "<option value='" . $row['AlbumID'] . "'>" . $row['AlbumName'] . "</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="txtAlbumName" id="lblAlbumName">Album Name:</label>
<div class="form-control">
<input type="text" <?php if(ddlAlbumSelect.Value != 0) echo "<p>Selected a value!</p>" ?> name="txtAlbumName" id="txtAlbumName" />
</div>
</div>
<div class="form-group">
<label for="txtArtist" id="lblArtist">Artist:</label>
<div class="form-control">
<input type="text" name="txtArtist" id="txtArtist" />
</div>
</div>
<div class="form-group">
<label for="txtLabel" id="lblLabel">Label:</label>
<div class="form-control">
<input type="text" name="txtLabel" id="txtLabel" />
</div>
</div>
<div class="form-group">
<label for="txtGenre" id="lblGenre">Genre:</label>
<div class="form-control">
<input type="text" name="txtGenre" id="txtGenre" />
</div>
</div>
<div class="form-group">
<label for="txtReleaseDate" id="lblReleaseDate">Release Date:</label>
<div class="form-control">
<input type="text" name="txtReleaseDate" id="txtReleaseDate" />
</div>
</div>
<input style="margin-left:30px" type="submit" />
</form>
<div class="clearfix"></div>
<br />
</div>
<footer>
<p>MyMuzik Library© <?php echo date("Y"); ?>
</footer>
</body>
</html>
The form action file referenced called insertAlbum.php is seen below as well:
<html>
<body>
<?php
$con = mysql_connect("localhost","root","1978afc247a");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("finalproject", $con);
$sql="INSERT INTO albums (AlbumName, Label, Genre, ReleaseDate, Artist)
VALUES
('$_POST[txtAlbumName]','$_POST[txtLabel]', '$_POST[txtGenre]','$_POST[txtReleaseDate]','$_POST[txtArtist]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added <br/>";
mysql_close($con)
?>
<a href="<?php echo $_SERVER['HTTP_REFERER']; ?>"><< Back</a>
</body>
</html>
I have tried using AJAX but have been unsuccessful, just looking for a kick in the right direction! Thanks.
You should have at least provided your Ajax effort. Anyway, below is my answer. I have put my explanations in a comment form.
$(document).on("change", "#ddlAlbumSelect", function(){ /* WHEN AN ALBUM HAS BEEN SELECTED */
var albumid = $(this).val(); /* GET THE ID OF THE SELECTED ALBUM */
$.ajax({ /* START OF AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "getalbum.php", /* THE FILE WHERE WE WILL PROCESS THE PASSED DATA */
data: {"albumid": albumid}, /* DATA TO BE PASSED */
dataType: "json", /* TYPE OF DATA THAT WILL BE RETURNED FROM getalbum.php */
success: function(result){ /* GET RETURNED DATA FROM getalbum.php */
/* BELOW WILL POPULATE THE CORRESPONDING TEXT FIELDS IN YOUR FORM */
$("#txtAlbumName").val(result.albumName);
$("#txtArtist").val(result.artist);
$("#txtLabel").val(result.label);
$("#txtGenre").val(result.genre);
$("#txtReleaseDate").val(result.releaseDate);
} /* END OF GETTING THE RETURNED DATA FROM getalbum.php */
}); /* END OF AJAX */
});
Then the getalbum.php:
/* ESTABLISH CONNECTION */
$con = new mysqli("localhost", "root", "1978afc247a", "finalproject");
/* CHECK CONNECTION */
if (mysqli_connect_errno()) {
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}
$stmt = $con->prepare("SELECT txtAlbumName, txtLabel, txtGenre, txtReleaseDate, txtArtist FROM albums WHERE AlbumID = ?");
$stmt->bind_param("i", $_POST["albumid"]);
$stmt->execute();
$stmt->bind_result($albumname, $label, $genre, $releasedate, $artist);
$stmt->fetch();
$stmt->close();
echo json_encode(array("albumName" => $albumname, "label" => $label, "genre" => $genre, "releaseDate" => $releasedate, "artist" => $artist"));
Refrain from using deprecated mysql_* API and use mysqli_* or PDO.
I thought you are trying to update the selected album? Why is your form going to insertAlbum.php?