javascript - Slidedown div 未出现在表单提交中

Question

当用户从用户单击提交的表单中选择他们的选项时，我想将值输出到一个 div 中，但该 div 最初是隐藏的，如果它满足特定条件，则在提交时向下滑动。下面是我的代码，因此您可以看到我的设置和我尝试过的内容。

我有一个表格:

<form id="toBeTranslatedForm" action="fun-translator.php" method="POST" >
      <textarea id="toBeTranslatedTextArea"></textarea>
      <select id="translationOptions"></select>
      <input type="submit" value="Translate" />
</form>

我在那个表格下面有一个 div:

<div id="translatedArea">
       <h2>Translated Text</h2>
       <div id="translatedText"></div>
</div>

我的 javascript 是:

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 = $('#toBeTranslatedTextArea').val();
        var selectValue = $('#translationOptions').val();
        outputTranslated();
    });
}

function outputTranslated()
{
    $('#translatedArea').slideDown();
}

$(document).ready(function() {
    populateTranslationOptions();
    getFormValues();
    //outputTranslated();
});

要在提交时显示的 div 的 CSS 是:

#translatedArea
{
    display: none;
}

Answer 1

不确定您打算如何处理翻译部分，但只是添加 返回错误； 结束于:

    function getFormValues()
    {
         $('#toBeTranslatedForm').submit(function() {
        __submitted = true;
        var textAreaValue = $('#toBeTranslatedTextArea').val();
        var selectValue = $('#translationOptions').val();
       outputTranslated();
        return false;
    });
 }

似乎有效 - 我将它放在 jsfiddle 中，这是我所做的唯一修改。我注意到 translatedArea 已经向下滑动，但在您看到它正常工作之前，该页面将变为 404。