1

当用户从用户单击提交的表单中选择他们的选项时，我想在 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;
}
4

1 回答 1

1

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

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

似乎有效 - 我把它放在 jsfiddle 中，这是我所做的唯一修改。我注意到它translatedArea已经在向下滑动，但是在你看到它工作之前页面就变成了 404。

于 2012-06-08T22:14:42.287 回答