javascript - 需要帮助解释问题-提交表单时显示文本区域，但表单没有 onSubmit

Question

我需要帮助解释这个雇主正在寻找什么!我正在申请一份工作，他们要求我在 codepen(我以前从未使用过)中做一些编码练习。他们要我“在提交表单之前隐藏感谢消息”

但是，他们示例中的表单没有提交操作。如果您单击代码笔中的提交按钮，您会收到一条错误消息/链接断开。我最初的想法只是让 onClick 函数在按下提交按钮时显示感谢消息，而不管表单是否实际提交......但我很困惑，因为最后一个问题让我写了一个 onClick 函数，所以我觉得他们一定想要不同的东西。我应该写一些代码来以某种方式处理表单吗？你会怎么处理这个？

谢谢!

我完成了第 1 步，正在尝试执行第 2 步...

function toggle(value) {
  if (value == 'show') {
    document.getElementById('reviewText').style.display = 'block';
  } else {
    document.getElementById('reviewText').style.display = 'none';
  }
}

function showThanks {
  document.getElementById('thanks').style.display = 'block';
}

$(document).ready(function() {

});

#reviewText {
  display: none;
}

#thanks {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Would you like to us leave a review? </label>
  <div class="radio">
    <label><input type="radio" name="review" value="Yes" onClick="toggle('show')"/>Yes</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="review" value="No" onClick="toggle('hide')"/>No</label>
  </div>
  <!-- Step 1. Hide the review text box unless user selects "Yes" -->
  <div class="textarea" id="reviewText">
    <label>Great! Please leave your review here:</label>
    <br>
    <textarea cols="40" rows="10"></textarea>
  </div>
  <div class="button">
    <button name="submit" type="submit">Submit</button>
  </div>
</form>
<!-- Step 2. Hide the thank you message until the form has been submitted -->
<div id="thanks">Thanks for your feedback! Have a great day.</div>

Answer 1

当表单元素没有定义 action 属性时，数据在表单显示的相同 url 中处理 (more info)。我认为在您的情况下，您需要为表单的提交事件定义一个处理程序，如下所示:

document.getElementsByTagName('form')[0].addEventListener('submit', function () {
  console.log('submitted');
  document.getElementById('thanks').style.display = 'block';
});