Get values from submitted form

Question

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.

Answer 1

You can get the data form the submit event

function outputTranslated() {
    $('#toBeTranslatedForm').submit(function(evt) {
       const form = evt.target;
       // get the field that you want
       const userInputField = form.elements['userInput'];
       alert(userInputField.value);
    });
}

Answer 2

var theArray = $('#toBeTranslatedForm').serializeArray();

See the .serializeArray docs.

On a pedantic note, that's not "from a submitted form", since you're asking for them before anything is actually submitted.