javascript - 程序没有在提交表单时将用户输入记录到控制台？

Question

我想知道如何让程序在用户单击“立即注册”按钮后将用户的输入值记录到控制台。

Answer 1

问题是因为 button 元素没有引发 submit 事件。

除此之外，您无论如何都不应该使用过时的 on* 事件属性。使用不显眼的事件处理程序，您可以使用 addEventListener() 附加它，如下所示:

function logOptions() {
  var s = document.getElementsByName('Interests')[0];
  var text = s.options[s.selectedIndex].text;
  console.log(text);
}

function logEmail() {
  console.log(document.getElementById('email').value);
}

document.getElementById('inputform').addEventListener('submit', function(e) {
  e.preventDefault();
  logOptions();
  logEmail();
});

<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>

<form id="inputform" method="get" action="confirmation.html">
  <input id="email" type="email" placeholder="Email Address" required>
  <button type="submit" id="validate">Sign up now</button>
  <select name="Interests" required>
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Marketing</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
  </select>
</form>

<svg>
  <rect width="40" height="3" style="fill: lightgreen" />
</svg>

另请注意，我添加了对 preventDefault() 的调用。这只是为了测试，以便您可以看到 console.log() 调用的结果。当您确实希望完成表单提交时，您可以在生产代码中删除它。