Slidedown div not appearing on form submit

Question

When the user chooses their options form the form the user clicks submit, I then want to output the values in a div, but the div is initially hidden and slidesdown upon submit if it meets certain criteria. Below is my code so you can see my set up and what I have tried.

I have a form:

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

I have a div below that form:

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

My javascript is:

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

The css for the div thats meant to be shown on submit is:

#translatedArea
{
    display: none;
}

Does `return false;` after `$('#translatedArea').slideDown();` helps ? — Jashwant, Jun 08 '12 at 21:50
Then, create a [jsfiddle](http://jsfiddle.net) so that we can look into it — Jashwant, Jun 09 '12 at 05:03

score 1 · Accepted Answer · answered Jun 08 '12 at 22:14

1

Not sure how you plan to handle the translation part, but just adding return false; to the end of:

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

seems to work - I put it in jsfiddle and that's the only modification I made. I noticed that the translatedArea was sliding down already but then the page was going to a 404 before you could see it work.

answered Jun 08 '12 at 22:14

Michael Bromley

4,792
4
35
57

this worked for me. thank you. but what does return false do, why did this work. – RSM Jun 09 '12 at 12:45
Hi! Glad it worked. To find out a more about why `return false;`, see this SO question: [http://stackoverflow.com/questions/855360/when-and-why-to-return-false-in-javascript](http://stackoverflow.com/questions/855360/when-and-why-to-return-false-in-javascript). Basically your original script seemed not to work because the form, when submitted, tried to open up a new page `fun-translator.php`, which is specified by the `
` tag. By using `return false;` we are basically preventing this behaviour. Hope that helps!
– Michael Bromley Jun 09 '12 at 17:02

Slidedown div not appearing on form submit

1 Answers1