提交按钮在功能中按条件浮动答案

【问题标题】：Submit button float up in function by a condition提交按钮在功能中按条件浮动
【发布时间】：2016-10-12 09:37:42
【问题描述】：

我有一个表单，它的条件听起来像这样：如果客户选择“是”，则会出现另一个表单，如果选择“否”，他可以提交表单。但如果他选择“否”，提交按钮会一直按下，这可能会有点棘手。所以，它的问题是，我必须把提交按钮越来越近的情况，即没有答案？

这是 html 代码的条件所在的部分：

<div id="ifYes" style="visibility:hidden">
    <div class="col-md-12 padding-top-10">
      <h1 span style="color:red">If you need visa, please complete the following data:</h1></br>        
    </div>
    <label for="firstName" class="control-label">Full name(as written in the passaport):</label>
    <div class="form-group">
        <div class="col-md-6 padding-top-10">
            <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="firstName" placeholder="First"  />
        </div>
        <div class="col-md-6 padding-top-10">
            <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="lastName" placeholder="Last"/>
         </div>
    </div>

这里是JS函数：

function yesnoCheck() {
     if (document.getElementById('yesCheck').checked) {
         document.getElementById('ifYes').style.visibility = 'visible';
     } else  {
         document.getElementById('ifYes').style.visibility = 'hidden';
     }
 }

【问题讨论】：

使用display显示/隐藏“表单”：What is the difference between visibility:hidden and display:none?
拜托，这是什么意思>？
好的，你说得对@Andreas，我把 display:none 和提交按钮更近了，但知道当我选择 YES 时，表单不会出现。我必须做其他更改或设置其他条件？
@baudo2048 表示答案和按钮之间有很大的空白
我添加了一个带有 sn-p 的答案

标签： javascript forms conditional-statements submit-button

【解决方案1】：

使用 display 显示/隐藏“表单”

What is the difference between visibility:hidden and display:none?

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
  } else {
    document.getElementById('ifYes').style.display = 'none';
  }
}

form {
  border: solid 1px black;
}

<form>
  <div>
    <input type="checkbox" id="yesCheck" onchange="yesnoCheck()" />
  </div>
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div id="ifYes" style="display:none">
    <div class="col-md-12 padding-top-10">
      <h1 span style="color:red">If you need visa, please complete the following data:</h1>
      <br />
    </div>
    <label for="firstName" class="control-label">Full name(as written in the passaport):</label>
    <div class="form-group">
      <div class="col-md-6 padding-top-10">
        <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="firstName" placeholder="First" />
      </div>
      <div class="col-md-6 padding-top-10">
        <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="lastName" placeholder="Last" />
      </div>
    </div>
  </div>
</form>

【讨论】：