提交按钮根据条件在功能中浮动

Question

我有一个表单，其条件听起来像这样：如果客户选择“是”，则会出现另一个表单，如果选择“否”，他可以提交表单。但如果他选择否，提交按钮将保持按下状态，这可能有点棘手。 So, the question it is, what condition I have to put in that way that the submit button comes closer when the NO answer is choose?

这是 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';
     }
 }

Answer 1

使用显示 show/hide "form"

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>

提交按钮根据条件在功能中浮动

Submit button float up in function by a condition

javascript

forms

conditional-statements

submit-button