如何选择选项时，如何停止表单字段跳转？

Question

我正在尝试创建一个包含多个字段的联系表单。当有人选择他们的查询是关于对某个课程感兴趣时，我会有一个Javascript弹出一个无线电字段，询问他们的等级。麻烦的是，当发生这种情况时，所有字段都跳到右边，而单选按钮并不像我们使用Javascript之前那样适合一行。

有什么想法吗？

以下是代码：

＆＃13;

＆＃13;

 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 = '';
 }

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>