Slidedown div not appearing on form submit

[GrimlocK]

When the user chooses their options form the form the user clicks submit, I then want to output the values in a div, but the div is initially hidden and slidesdown upon submit if it meets certain criteria. Below is my code so you can see my set up and what I have tried. I have a form:\[code\]<form id="toBeTranslatedForm" action="fun-translator.php" method="POST" > <textarea id="toBeTranslatedTextArea"></textarea> <select id="translationOptions"></select> <input type="submit" value="http://stackoverflow.com/questions/10956376/Translate" /></form>\[/code\]I have a div below that form:\[code\]<div id="translatedArea"> <h2>Translated Text</h2> <div id="translatedText"></div></div>\[/code\]My javascript is:\[code\]var __submitted = false;function populateTranslationOptions() { var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"]; $.each(translationOptions, function(index, value) { $("#translationOptions") .append($("<option></option>") .attr("value", value) .text(value)); });}function getFormValues(){ $('#toBeTranslatedForm').submit(function() { __submitted = true; var textAreaValue = http://stackoverflow.com/questions/10956376/$('#toBeTranslatedTextArea').val(); var selectValue = http://stackoverflow.com/questions/10956376/$('#translationOptions').val(); outputTranslated(); });}function outputTranslated(){ $('#translatedArea').slideDown();}$(document).ready(function() { populateTranslationOptions(); getFormValues(); //outputTranslated();});\[/code\]The css for the div thats meant to be shown on submit is:\[code\]#translatedArea{ display: none;}\[/code\]