Change bodyfont onChange?

JavaScript
1

I’m trying to figure out how to change the bodyfont with a selectfield and jQuery?

Is it possible at all?

Here is what I have so far:

jQuery(function(jQuery)
{
    jQuery(document).ready(function() {
    	jQuery("#mainfont").change(function() {jQuery(document.body).css("font-family",jQuery("#mainfont").getValue())});
    });
});

The php:

echo 'Main Font: <select name="mainfont" id="mainfont">';
$sql = "SELECT * FROM ".$prefix."_cms_fonts ORDER BY id DESC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
    
    echo '<option value="'.$row1['id'].'">'.$row1['font1'].'</option>';
    
}
echo '</select>';

In my db I have these 3 fileds (id, font1, font2)

The id is important for when submitting/saving the form, font1 is a short description of the font, and font2 is the fontcode (ex. “Verdana, Geneva, sans-serif”).

Am I doing this all wrong, and can it be done?

2

Well, got a bit closer but not there yet…

<select name="font" onchange="document.body.style.fontFamily='courier'">
<option value="courier">Courier</option>
<option value="verdana">Verdana</option>
</select>

I need to get the option value up in the onChange command… Not sure how. Please help!

3

You can use the this keyword for that.

onchange=“document.body.style.fontFamily= this.value”