无法使用查询选择器从表单中获取数据

Question

我无法从表单输入中获取数据，好像提交按钮的唯一功能是刷新页面。

const Form = document.querySelector('.broadcast-form')
Form.addEventListener('submit', (e) => {
  e.preventDefault()
  const cliente = Form.querySelector('#clienti').options[clienti.selectedIndex].text
  console.log(cliente)
})

<form class="container broadcast-form">
  <select multiple class="form-control" id="clienti" style="height: 150px" onchange="selectCustomer()">
<!--
    <% for(var i=0; i<clienti.length; i++) {%>
      <option><%= clienti[i]["Cliente"] + " CL: " + codiceLisa[i]["Codice_Lisa"] %></option>
    <% } %>
-->
    <option>Foo CL: ABC</option>
    <option>Bar CL: DEF</option>
    <option>Baz CL: GHI</option>
  </select>
  <input type="submit" class="btn btn-primary btn-lg" value="Genera XML" />
</form>

Answer 1

当您查看浏览器的 JavaScript 控制台时，您会发现它抱怨无法读取 undefined 的属性。这是由于 clienti 未在您的 JavaScript 代码中的 clienti.selectedIndex 部分定义。定义它似乎可以解决您的问题。

作为奖励：您可能要考虑使用 selectedOptions to find all selected options in the select, given that it has the multiple attribute. The selectedIndex 只会给您第一个。

function selectCustomer() {
  /* defined only to prevent errors when changing the value of the select */
}

const form = document.querySelector('.broadcast-form');
form.addEventListener('submit', (e) => {
  e.preventDefault()
  let clienti = form.querySelector('#clienti'),
      cliente = (clienti.selectedIndex < 0 ? null : clienti.options[clienti.selectedIndex].text);
  console.log(cliente);
  
  // bonus:
  for (let clienteEl of clienti.selectedOptions) {
    console.log(`bonus: ${clienteEl.text}`);
  }
})

<form class="container broadcast-form">
  <select multiple class="form-control" id="clienti" style="height: 150px" onchange="selectCustomer()">
<!--
    <% for(var i=0; i<clienti.length; i++) {%>
      <option><%= clienti[i]["Cliente"] + " CL: " + codiceLisa[i]["Codice_Lisa"] %></option>
    <% } %>
-->
    <option>Foo CL: ABC</option>
    <option>Bar CL: DEF</option>
    <option>Baz CL: GHI</option>
  </select>
  <input type="submit" class="btn btn-primary btn-lg" value="Genera XML" />
</form>

无法使用查询选择器从表单中获取数据

Cannot get data from form with query selector

javascript

html

selectors-api