'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.

javascriptjqueryhtmlforms


Solution 1:[1]

Javascript only, using FormData:

form.addEventListener("submit", function(e) {
  e.preventDefault();
  const data = new FormData(form);
  for (const [name,value] of data) {
    console.log(name, ":", value)
  }
})
<form id="form">
     <select name="sselectt">
       <option value="default" defaultSelected="true">-- Select --</option>
       <option value="foo">foo</option>
       <option value="bar">bar</option>
     </select>
     <label for="inpt">remember</label>
     <input id="inpt" name="rrememberr" type="checkbox" />
     <button type="submit">submit</button>
</form>

Solution 2:[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.

Solution 3:[3]

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

Solution 4:[4]

I think you'r looking for something like this.

$('#toBeTranslatedForm').submit(function() {
  alert($(this).serialize());
  return false;
});

Hope it helps

Solution 5:[5]

after submission, you can use just get the value by doing the following:

function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
    var textarea = $('#toBeTranslatedTextArea').val();
    var allVals = [];
    $('#translationOptions :checked').each(function() {
   allVals.push($(this).val());
 });
});}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dave Newton
Solution 3 Miguel Carvajal
Solution 4 Joe
Solution 5 franciscovalera

Related Questions