Submit button float up in function by a condition

Question

I have a form that haves a condition that sounds like that: If the client choose YES another form will appear, if is choosing NO, he can submit the form. But if he choose NO, the SUBMIT button stay down and it can be a little bit tricky. 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?

Here is the part of the html code where the condition it is:

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

And here is the JS function:

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

Use `display` to show/hide the "form": [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — Andreas, Oct 12 '16 at 09:42
Ok, you have right @Andreas, I put display:none and the submit button comes closer but know when I choose YES, the form doesen't appear. I have to do another change or put other conditions? — Anamaria Popa, Oct 12 '16 at 10:01
@baudo2048 It means that is a big blank space between the answer and button — Anamaria Popa, Oct 12 '16 at 10:01

score 1 · Accepted Answer · edited May 23 '17 at 12:00

Use display to show/hide the "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

1 Answers1