Slidedown div가 양식 제출에 나타나지 않습니다.

Question

사용자가 제출 양식을 선택하면 양식에 값을 출력하고 싶지만 div는 초기에 숨겨져 있고 특정 기준을 충족하면 제출시 슬라이드 다운됩니다 . 아래 코드는 내 설정과 내가 시도한 것을 볼 수 있도록 작성되었습니다.

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

내 자바 스크립트는 다음과 같습니다 : 사업부 그게 전부에 대한

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(); 
}); 

는 CSS가 의미 내가 그 형태 아래 사업부가

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

:

나는 양식을 가지고 제출시 표시 될 내용 :

#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 페이지로 이동하고있었습니다.