kuchar kuchar - 5 months ago 9
PHP Question

Display x inputs if select with value x selected

i want to make form that will display to user inputs by choosen value from select.

<div class="form-group">
<label for="select" class="col-lg-2 control-label">Accompanying person</label>
<div class="col-lg-10">
<select ng-model="myVar" class="form-control" id="select">
<option value="ppl1">1</option>
<option value="ppl2">2</option>
<option value="ppl3">3</option>
<option value="ppl4">4</option>
<option value="ppl5">5</option>
</select>
</div>
</div>

<!-- I want display this x3 if selct 3 selected -->
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Subname</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Subname" type="text">
</div>
</div>
<!-- End -->


https://jsfiddle.net/kuchar/fwpccc5r/#&togetherjs=swsLG9gvpN

https://jsfiddle.net/kuchar/fwpccc5r/

Answer

Check out this : https://jsfiddle.net/ha2o3zpq/3/

With the help of jQuery and CSS:

$("#select").change(function() {
  var count = parseInt($(this).val().replace("ppl", ""));
  $("#npersons").html("");
  for (var i = 0; i < count; i++) {
    $("#npersons").append("<h4>Person : #" + (i + 1) + "</h4>");
    $("#npersons").append($("#persons").clone().prop("id", "ppl" + i).show());
  }
});

$("#select").change(function() {
  var count = parseInt($(this).val().replace("ppl", ""));
  $("#npersons").html("");
  for (var i = 0; i < count; i++) {
    $("#npersons").append("<h4>Person : #" + (i + 1) + "</h4>");
    $("#npersons").append($("#persons").clone().prop("id", "ppl" + i).show());
  }
});
#persons {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-horizontal">
  <fieldset>
    <legend>Formularz rezerwacji</legend>

    <div class="form-group">
      <label for="inputName" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputName" placeholder="Name" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputSubname" class="col-lg-2 control-label">Subname</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputSubname" placeholder="Subname" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputOsk" class="col-lg-2 control-label">Name OSK</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputOsk" placeholder="Name OSK" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputNip" class="col-lg-2 control-label">NIP</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputNip" placeholder="NIP" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" placeholder="Email" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="inputPhone" class="col-lg-2 control-label">Phone number</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputPhone" placeholder="Phone number" type="text">
      </div>
    </div>

    <div class="form-group">
      <label for="textArea" class="col-lg-2 control-label">Address</label>
      <div class="col-lg-10">
        <textarea class="form-control" rows="3" id="textArea"></textarea>

      </div>
    </div>

    <div class="form-group">
      <label for="select" class="col-lg-2 control-label">Accompanying person</label>
      <div class="col-lg-10">
        <select ng-model="myVar" class="form-control" id="select">
          <option value="ppl0">Select</option>
          <option value="ppl1">1</option>
          <option value="ppl2">2</option>
          <option value="ppl3">3</option>
          <option value="ppl4">4</option>
          <option value="ppl5">5</option>
        </select>
      </div>
    </div>

    <!-- I want display this x3 if selct 3 selected -->
    <div id="persons">

      <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
          <input class="form-control" id="inputEmail" placeholder="Name" type="text">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Subname</label>
        <div class="col-lg-10">
          <input class="form-control" id="inputEmail" placeholder="Subname" type="text">
        </div>
        <hr/>
      </div>
      <!-- End -->
    </div>
    <div id="npersons">

    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button type="reset" class="btn btn-default">Clear</button>
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
    </div>
  </fieldset>
</form>