Input field appear after selecting a check box. HTML

Question

I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.

<div class="form-group">
  <label class="col-md-4 control-label" for="positionsought">Position Sought</label>
  <div class="col-md-4">
  <div class="checkbox">
    <label for="positionsought-0">
      <input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
      Cutting
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-1">
      <input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
      Sewing
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-2">
      <input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
      Upholstery
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-3">
      <input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
      Frame Department
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-4">
      <input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
      Mill Room
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-5">
      <input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
      Cushion
    </label>
    </div>
  <div class="checkbox">
    <label for="positionsought-6">
      <input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
      Any
    </label>
    </div>
  </div>
</div>

Answer 1

Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.

First add this function to each checkbox onclick="dynInput(this);"

<input type="checkbox" name="check1" onclick="dynInput(this);" />

and add this to wherever you would like the inputs to display.

<p id="insertinputs"></p>

Then simply add this javascript function to your head.

<script type="text/javascript">
 function dynInput(cbox) {
  if (cbox.checked) {
    var input = document.createElement("input");
    input.type = "text";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "Text to display for " + cbox.name;
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
  }
}
</script>

JsFiddle here: http://jsfiddle.net/brL6gy7r/

Answer 2

You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:

$(document).ready(function () {
  $('#chkBox').click(function () {
    if ($(this).is(':checked')) {
        // create input field
    } else {
       // if checkbox is not checked.. dont show input field 
    }
  });
});

For a full demo on how to do this with a dialog, click this link and observe

http://jsfiddle.net/Runman44/5vy1m233/

Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)