如何将两个表单输入值获取到 Javascript console.log答案

【问题标题】：How to get two form input values to Javascript console.log如何将两个表单输入值获取到 Javascript console.log
【发布时间】：2020-04-21 10:42:07
【问题描述】：

我有一个由两个字段组成的表单。
填写表格后，我想在 console.log 中获取两个字段，显示“字段 1”+字段 1+“字段 2”+字段 2。
我知道如何让它显示一个字段的值，但我一直坚持在两个字段中执行此操作..

这怎么可能完成？

这里是 HTML 部分：

<form name="Test">

<div class="form-group col-md-9">
<label for="inputState">Field1</label>
<select id="sel-inv" name="sel-inv" class="form-control">
    <option value=""></option> 
    <?php
    while($data1 = pg_fetch_array($queryInv)) 
        { 
        echo ("<option value=". $data1['gid'].">". $data1['gid']. "</option>"); 
        }
    ?>                                              
</select>
</div>

<div id="nom-dossier" class="form-group col-md-4">
<label for="exampleInputPassword1">Field2</label>
    <input type="text" class="form-control" id="nom-dossier-sel" name="nom-dossier-sel">
</div>

</form>

这就是 JS 部分：

<script>
document.getElementById('sel-inv').addEventListener('input', function() {
var field1 = this.value;
console.log ('Field 1 ' + field1);
});
</script>

感谢您的帮助！

【问题讨论】：

sel-inv 是 field1，但这里的 field2 是什么？

标签： javascript forms

【解决方案1】：

表单元素包含所有值及其名称。

document.getElementById("form").onchange = function(e){

  var form = e.target.form;
  console.log(form["sel-inv"].value, form["nom-dossier-sel"].value);
  
}

<form name="Test" id="form">

<div class="form-group col-md-9">
<label for="inputState">Field1</label>
<select id="sel-inv" name="sel-inv" class="form-control">
    <option value="1">1</option> 
    <option value="2">2</option> 
                                               
</select>
</div>

<div id="nom-dossier" class="form-group col-md-4">
<label for="exampleInputPassword1">Field2</label>
    <input type="text" class="form-control" name="nom-dossier-sel">
</div>

</form>

【讨论】：

【解决方案2】：

此修改后的代码将按要求执行：

document.getElementById('sel-inv').addEventListener('input', function() {
  var field1 = this.value;
  let field2 = document.getElementById(‘nom-dossier-sel’).value;
  console.log ('Field 1 ' + field1 + ' Field 2 ' + field2);
});

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
我更新了上述内容，以更清楚地说明问题已得到解答。更好？

【解决方案3】：

您可以为所有字段分配自定义data attribute，并且在更改任何字段时，您可以通过queryselector 的data-field 获取元素

或

建议实际使用id 或class 来获取属性。您将拥有更多控制权。

document.getElementById("sel-inv").addEventListener("change", function () {
  const [f1, f2] = Array.from(
    document.querySelector("form").querySelectorAll("[data-field='field']")
  );
  console.log(f1, f2);
});

<form name="Test">
    <div class="form-group col-md-9">
      <label for="inputState">Field1</label>
      <select id="sel-inv" name="sel-inv" class="form-control" data-field="field">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>

    <div id="nom-dossier" class="form-group col-md-4">
      <label for="exampleInputPassword1">Field2</label>
      <input type="text" class="form-control" id="nom-dossier-sel" name="nom-dossier-sel" data-field="field">
    </div>

  </form>

【讨论】：