Loading data in textarea from MySQL Database using dynamic dropdownlist

Question

Allright, to make everything clear I will explain everything as clear as I can and include images. It will probably be quite a long question like this but I just want to make everything clear.

Well, I curently have a "textbox" (TinyMCE AJAX File Manager) which is displaying the html from a textfile like this:

This is the code to this atm:

Bericht:</td><td align="left"><textarea name="content" cols="50" rows="15"><?php echo "$show"?></textarea></td></tr>

And:

<?php
if (file_exists("prwyswig.txt")){
$show = file_get_contents('prwysiwyg.txt');
}
else{
$show = file_get_contents('tabel.txt');
}
?>

What I want is to not use the textfiles anymore but I want to select html codes which are stored in a MySQL database. I made a dynamic dropdown list which includes the names of "newsletters".

So what I want is to select a newsletter from the dropdown list and then load the html that belongs to that titel into the textarea. I have tried several things myself but I just can't figure out how to manage this.

Do I have to write another query or not? Do I have to put the dorpdown list in another form to be able to load the data in the textarea with a submit button?

I will post the rest of the codes and my DB table structure below because you will probably need them^^ If you have any other question just ask them in the comments, any help would be great!

NOTE: I know I shouldn't be using mysql_* but that is not the issue here. I will change to PDO later on!

Connect to DB+query to select the right data:

<?php
mysql_connect('localhost','root','root');
mysql_select_db('NAW') or die (mysql_error());
$strSQL     = "SELECT Content, Titel FROM NAW.Mail";
$sql_result     = mysql_query($strSQL);
?>

Dynamic dropdown list:

<td valign=top>Nieuwsbrief:</td>
<td>
<?php
echo "<select name=\"show\">"; 
echo "<option size =30 selected>Select</option>";
if(mysql_num_rows($sql_result)) 
{ 
while($row = mysql_fetch_assoc($sql_result)) 
{ 
echo "<option>$row[Titel]</option>"; 
} 

} 
else {
echo "<option>No Names Present</option>";  
} 
?>

The database Table:

ID  Content                 Datum       Titel
1  (lots of encoded html)   18-03-13    test
2  (lots of encoded html)   18-03-13    test2
4  (lots of encoded html)   18-03-13    alles weer testen
5  (lots of encoded html)   20-03-13    testje
6  (lots of encoded html)   21-03-13    Statusupdate week 6

Answer 1

You can do it as follows, Your HTML and PHP code for your form would be like this.

<?php
mysql_connect('localhost','root','root');
mysql_select_db('NAW') or die (mysql_error());
$strSQL     = "SELECT Titel FROM NAW.Mail";
$sql_result     = mysql_query($strSQL);
?>


    <form id="myform">
        <td valign=top>Nieuwsbrief:</td>
        <td>
        <?php
        echo "<select id=\"NieuwsbriefSelect\" name=\"show\">"; 
        echo "<option size =30 selected>Select</option>";
        if(mysql_num_rows($sql_result)) 
        { 
        while($row = mysql_fetch_assoc($sql_result)) 
        { 
        echo "<option value=\"$row[Titel]\">$row[Titel]</option>"; 
        } 

        } 
        else {
        echo "<option>No Names Present</option>";  
        } 
        ?>

    Bericht:</td><td align="left"><textarea name="content" cols="50" rows="15"></textarea></td></tr>

</form>

Use JQuery to add an onChange event for <Select> like this

<script>
// variable to hold request
var request;
$(document).ready(function() {

$('#NieuwsbriefSelect').change(function() {
  //send Ajax call to get new contents
  var selected_text = $(this).val();
  // setup some local variables
  var $form = $("#myform");
  // let's select and cache all the fields
  var $inputs = $form.find("input, select, button, textarea");
  // serialize the data in the form
  var serializedData = $form.serialize();

  // fire off the request to /get_my_contents.php
  request = $.ajax({
    url: "/get_my_contents.php",
    type: "post",
    data: serializedData
   });


   // callback handler that will be called on success
   request.done(function (response, textStatus, jqXHR){
    //populate the TextArea
    $("textarea[name='content']").html(response);
   });


});

});
</script>

And finally your get_my_contents.php would be like this

<?php
$title = $_POST["show"];
mysql_connect('localhost','root','root');
mysql_select_db('NAW') or die (mysql_error());
$strSQL     = "SELECT Content from NAW.Mail where Titel = '$title' ";
$sql_result     = mysql_query($strSQL);

$row = mysql_fetch_assoc($sql_result)
print $row["Content"];
?>

Hope it will resolve your issue.

EDIT You can try out this fiddle (Just client side code, Ajax will not work) http://jsfiddle.net/jjWdF/