Search code examples
javascriptjqueryhtmlforms

Get values from submitted form


I have a very simple form:

<form id="toBeTranslatedForm" action="actionpage.php" method="POST" >
        <textarea name="userInput" id="toBeTranslatedTextArea"></textarea>
        <select id="translationOptions">//dynamically filled</select>
        <input type="submit" value="Translate" />
</form>

Using Jquery I am detecting whether the form has been submitted:

function outputTranslated()
{
    $('#toBeTranslatedForm').submit(function() {
        //do stuff
    });
}

How do I get the text typed in the text area and the option selected in the select box from the form above? Ideally I would like to put them into an array.


Solution

  • Here is how you can get value:

    function outputTranslated() {
        $('#toBeTranslatedForm').submit(function() {
           var textareaval = $('#userInput').val();
           alert(textareaval);
        });
    }
    

    You can do the same for selection box by adding this line after the textareaval variable definition in the code above:

    var selectval = $('#translationOptions').val();
    

    Then, you can either use serialise, or you can put it into an array manually:

    var a = [textareaval,selectval];