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

不确定您打算如何处理翻译部分，只是添加 return false; 到最后：

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

似乎有效 - 我把它放在jsfiddle中，这是我做的唯一修改。我注意到translatedArea已经滑落了，但是在您看到它工作之前页面已经转到404了。

Slidedown div没有出现在表单提交上

1 个答案: