PHP - creating/calling JSON from Select Options - php

Question

Getting down and dirty with javascript and JSON.
I want to store some html values inside a JSON array, so I can call them when needed (usually from some jquery event listener)
This beats constantly using $.ajax for client-to-server calls.
So, I have a <select> that has database populated options:
<select name="emailmsgid" id="emailmsgid">
<option value="0">------select a template-------</option>
<?php
$q = mysql_query("SELECT emailmsgid,emailmsgsubject,emailmsg_html FROM tbl_email_templates");
while ($r = mysql_fetch_array($q)){
$emailmsgid = $r['emailmsgid']; // int
$emailmsgsubject= $r['emailmsgsubject']; // short desc
$emailmsg_html = $r['emailmsg_html']; // usually html with images (save to json, somehow)
?>
<option value="<?=$emailmsgid;?>"><?=$emailmsgsubject;?></option>
<? } ?>
</select>
<br>
<textarea name="selectedmsg" id="selectedmsg"></textarea>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// populate the textarea above
$("#emailmsgid").change(function(){
var selectedID = $(this).val();
/* how to look into json here with selectedID */
$("#selectedmsg").val("whatever the json has saved for that emailmsgid");
});
});
</script>
This is what's missing above.
-Creating the json string, (from inside the php/mysql while statement), so the jquery below can reference the json, matching up the selectedID to what's inside json?
I do admit I am new to JSON, and this is a great way for me to learn how to work with it, as well as call the name/value pairs from jquery.
I'm hoping to save the emailmsg_html inside json, then load it into the textarea when I select it's matching emailmsgid in the select input.
(I'm basically working at eliminating any times my code needs to call the server, and seems this is the best route)

Answer 1

Have you tried using json_encode(): http://php.net/manual/en/function.json-encode.php
You can pass it objects, arrays, etc and it will convert them for you.
Extra Comment
Your code is pretty messy. Having MySQL requests in the middle of the HTML isn't great. You might want to do some research into MVC frameworking.

Answer 2

What I would do, to prevent various encoding and transport issues, is to place the html in hidden containers that you can access later:
<div style="display:none">
<?php while ($r = mysql_fetch_array($q)){ ?>
<div id="container_<?php echo $r['emailmsgid']; ?>">
<div class="description">
<?php echo $r['emailmsgsubject']; // short desc ?>
</div>
<div class="html">
<?php echo $r['emailmsg_html']; // usually html with images (save to json, somehow) ?>
</div>
<?php } ?>
</div>
Then your script would become:
$(document).ready(function(){
// populate the textarea above
$("#emailmsgid").change(function(){
var selectedID = $(this).val();
var msgHtml = $('#container_' + selectedID).find('.html').html(); // This line is how you get the html
$("#selectedmsg").val("whatever the json has saved for that emailmsgid");
});
});
</script>