Sonya Panich Sonya Panich - 2 months ago 9
HTML Question

JavaScript/HTML Hidden form elements not displaying properly

I am creating a basic form with input fields. One of the fields uses a checkbox. When checked, I would like the form to display two more input fields below, aligned with the prior ones (beginning on the line after the checkbox). Right now, my code is having the hidden fields show at the end of that line, rather than the next one:

Html :

<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Port
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication
</div>
<div id="hidden_fields">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
</div>
</div>

<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success">Update</button>
<button class="btn btn-primary">Reset</button>
</div>
</div>
</form>


Javascript :

$(function() {
var checkbox = $("#enable_auth");
var hidden = $("#hidden_fields");

hidden.hide();

checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
} else {
hidden.hide();
}
});
});


Does anyone know what is causing this? Thank you!

Answer

Working Fiddle.

I would like the form to display two more input fields below, aligned with the prior ones. So you have to put the hidden_fields div just before checkbox field, so reorder your divs like :

<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
  <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Outgoing SMTP Server
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="text" id="outgoing_sever" required="required" class="form-control col-md-7 col-xs-12">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Port
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="text" id="port" required="required" class="form-control col-md-7 col-xs-12">
    </div>
  </div>

  <div id="hidden_fields">
    <div class="form-group">
      <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Login
      </label>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="server_login" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-3 col-sm-3 col-xs-12">SMTP Server Passowrd
      </label>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="server_password" name="hidden" required="required" class="form-control col-md-7 col-xs-12">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Enable Authentication
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="checkbox" id="enable_auth" name="question">Enable SMTP Authentication
    </div>

  </div>

  <div class="form-group">
    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
      <button type="submit" class="btn btn-success">Update</button>
      <button class="btn btn-primary">Reset</button>
    </div>
  </div>
</form>

Hope this helps.

Comments