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 に答える