Как получить два входных значения формы в Javascript console.log

Question

У меня есть форма, состоящая из двух полей.
После заполнения формы я хотел бы получить два поля в файле 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>

Спасибо за помощь!

Answer 1

Этот модифицированный код будет выполнять в соответствии с запросом:

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

Answer 2

Элемент формы имеет все значения со своими именами.

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>

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