javascript variable not setting (possible jquery issue)

I've got the a piece of a form where I've applied some javascript (the end-purpose of the js is to show the appropriate follow up question), but the part that loads the input's and select's values into variables doesn't seem to be working.

Here's the exact code:

# HTML
<ul id="m_mlt_t">
<li>How long have you known <span class="nom">__</span>?</li>
    <li><input name="m_mlt_n" type="text" maxlength="3" /> <select name="m_mlt_t"><option></option><option>days</option><option>months</option><option>years</option></select></li>
    <li><input name="m_mlt_n" type="radio" value="777" />I prefer not to answer</li>
    <li><input name="m_mlt_n" type="radio" value="999" />Don't know</li>
    <li><span class="m_mlt_t" style="display:none;"></span></li>
</ul>

# JAVASCRIPT
$('select[name="m_mlt_t"], input[name="m_mlt_n"]').change(function() {
    var time = $('input[name="m_mlt_n"]').val();
        $("span#m_mlt_t").text(time);
        $("span#m_mlt_t").fadeIn();
    var period = $('select[name="m_mlt_t"]').val();
        $("span#m_mlt_t").append(" " + period);
        $("span#m_mlt_t").fadeIn();
});

In the fiddle, I expect the span to fade in and display the values of the textfield and the dropdown. http://jsfiddle.net/vxvSU/

btw the code for the following custom functions isn't included, but I know they work
counter_multiChoice(),fadeOUT_sect(),fadeIN_sect()