选择选择选项时如何停止表单域跳转？

Question

我正在尝试创建一个包含多个字段的联系表单。当有人选择他们的查询是关于对某个课程感兴趣时，我有一段 Javascript 会弹出一个单选字段，询问他们的级别。问题是，当这种情况发生时，所有字段都会跳到右边，并且单选按钮不像我有 Javascript 之前那样全部放在一行上。

有什么想法吗？

代码如下：

 function showfield(name) {
   if (name == 'Interested In Class') document.getElementById('reveal').innerHTML = '<div id="form-group"> <label for="level">Level Of English:</label> <input name="level" type="radio" id="level" required>Beginner<input name="level" type="radio" id="level" required>Intermediate<input name="level" type="radio" id="level" required>Advanced</div>';
   else document.getElementById('reveal').innerHTML = '';
 }

/* Forms */

form {
  display: table;
}
#form-group {
  display: table-row;
}
#form-group label:after {
  content: "*";
  color: red;
  font-size: 15px;
  vertical-align: super;
}
label {
  font-size: 24px;
  display: table-cell;
}
input[type=text] {
  width: 100%;
  padding: 8px 15px;
  margin: 8px 0;
  margin-left: 15px;
  border: solid #047BFF;
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  display: table-cell;
}
input[type=text]:focus {
  border: solid #5BD2FF;
}
select {
  width: 100%;
  padding: 8px 15px;
  margin: 8px 0;
  margin-left: 15px;
  border: solid #047BFF;
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  display: table-cell;
}
select:focus {
  border: solid #5BD2FF;
}
input[type=radio] {
  margin: 8px 0;
  margin-left: 15px;
  margin-right: 5px;
  margin-top: 16px;
  display: table-cell;
}
#comments {
  width: 100%;
}

<div id="contentOS">
  <form name="contact" method="post" action="#" class="contentcontact">
    <div id="form-group">
      <label for="firstName">First Name:</label>
      <input name="firstName" type="text" id="firstName" required>
    </div>
    <div id="form-group">
      <label for="lastName">Last Name:</label>
      <input name="lastName" type="text" id="lastName" required>
    </div>
    <div id="form-group">
      <label for="email">Email:</label>
      <input name="email" type="text" id="email" required>
    </div>
    <div id="form-group">
      <label for="query">Select Your Query:</label>
      <select name="query" type="radio" id="query" onchange="showfield(this.options[this.selectedIndex].value)" required>
        <option></option>
        <option value="Interested In Class">I'm interested in joining a class</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div id="reveal"></div>
    <div id="form-group">
      <label for="comments">Comments:</label>
      <input name="comments" type="text" id="comments" required>
    </div>
    <input type="submit">
  </form>

</div>

Answer 1

您的代码不起作用的原因是<div id="form-group"> 没有包含<div id="reveal">

用这个附加你的html代码，

<div id="form-group">

       <label for="query">Select Your Query:</label>
       <select name="query" type="radio" id="query" onchange="showfield(this.options[this.selectedIndex].value)" required>
        <option></option>
        <option value="Interested In Class">I'm interested in joining a class</option>
        <option value="Other">Other</option>
       </select>
       <!-- this is where the </div> was wrongly placed -->
       <div id="reveal"></div>
       </div>