I'm working on a music Web app. I have a form that has a textarea field. This field is set to a default custom font. I have six custom fonts, with a button group that changes the font in the form. After the form is submitted, the display page displays the default font. I want to create a new hidden field and store the selected font with the tune in the database. My question is how do I create a variable for my custom fonts, and pass the variable to the new hidden form field and display query?

Here's the code:

Code:
<!-- STYLE (textarea field)-->
#TArea {
font-family: font1; font-size:18px;
}


<!-- HTML BUTTON GROUP -->
<div id='radioContainer'>
<button class='radio' onClick="javascript:changefont('font1');">font1</button>
<button class='radio' onClick="javascript:changefont('font2');">font2</button>
<button class='radio' onClick="javascript:changefont('font3');">font3</button>
<button class='radio' onClick="javascript:changefont('font4');">font4</button>
<button class='radio' onClick="javascript:changefont('font5');">font5</button>
<button class='radio' onClick="javascript:changefont('font6');">font6</button>
</div> 


<!-- JAVASCRIPT BUTTON GROUP -->
<script> <!--BUTTON GROUP-->
YUI().use('button-group', function(Y){
// A group of checkbox-like buttons
var buttonGroupCB = new Y.ButtonGroup({
    srcNode: '#checkboxContainer',
    type: 'checkbox',
    on: {
        'selectionChange': function(e){
        var selection = buttonGroupCB.getSelectedButtons();
        Y.log('buttonGroup2 selected count = ' + selection.length);
        }
    }
}).render();

// A group of radio-like buttons
var buttonGroupRadio = new Y.ButtonGroup({
    srcNode: '#radioContainer',
    type: 'radio'
})

buttonGroupRadio.render();

buttonGroupRadio.on('selectionChange', function(e){
    Y.log('buttonGroup selection changed');
});

});
</script>


<!-- FORM FIELD -->
<textarea name="TArea" id="TArea" class="TArea-input" rows="1" cols="16"/></textarea>


<!-- DISPLAY QUERY -->
var tune = document.getElementById('tune');

function showList() {
    results.innerHTML = '';
    db.transaction(function(tx) {
    tx.executeSql(selectAllStatement, [], function(tx, result) {
dataset = result.rows;
    for (var i = 0, item = null; i < dataset.length; i++) {
        item = dataset.item(i);
        results.innerHTML += 
    '<a href="#" onclick="showTune('+i+')">' + item['title'] + '</a>';
    }
    });
    });
}

function showTune(id) {
    tune.innerHTML = '';
    db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM tunes where id = id', [], function(tx, record)     {
    dataset = record.rows;
    {
        item = dataset.item(id);
        tune.innerHTML += 
        '<span style="font-family: helvetica; font-size:24px;">' + item['title'] + '<span>' + '<hr size="1">' + '<H1>' + item['TArea'] + '</H1>' + '<hr size="1">' + '<pre>' + '<span style="font-family: courier; font-size:18px;">' + item['lyrics'] + '<span>' + '</pre>';
    }
    });
    });
}