javascript - 从提交的表单中获取值

Question

我有一个非常简单的表格：

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

使用 Jquery 我正在检测表单是否已提交：

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

如何从上面的表单中获取在文本区域中键入的文本以及在选择框中选择的选项？理想情况下，我想将它们放入一个数组中。

Answer 1

使用 Vanilla JS FormData：

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var data = new FormData(form);
  for (const [name,value] of data) {
    console.log(name,value)
  }
})

   
<form id="form">
     <select id="sl1" name="sl">
       <option value="0" defaultSelected="true">-- Select --</option>
       <option value="trek">-- Trek --</option>
       <option value="rim">-- RIM --</option>
     </select>
     <label for="lg">remember</label>
     <input type="checkbox" name="remember" id="lg" />
     <button type="submit">submit</button>
</form>

Answer 2

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

请参阅.serializeArray文档。

在迂腐的笔记中，这不是“来自提交的表单”，因为您在实际提交任何内容之前就要求它们。

Answer 3

您可以从提交事件中获取数据

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 4

我想你正在寻找这样的东西。

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

希望能帮助到你

Answer 5

以下是获得价值的方法：

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

textareaval您可以通过在上面代码中的变量定义之后添加此行来对选择框执行相同的操作：

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

然后，您可以使用序列化，也可以手动将其放入数组中：

var a = [textareaval,selectval];

Answer 6

提交后，您可以通过执行以下操作来获取值：

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