Add dynamic inputs

by TheOrdinaryGeek

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css">
<div class="controls">
  <div class="input-prepend">
    <input type="text" class="input-large" id="wallbox" name="wallbox">
    <div class="toggle btn btn-default off" data-toggle="toggle"><input type="checkbox" class="input-large" value="1" name="myToggle" id="myToggle">
      <div class="toggle-group"><label class="btn btn-success toggle-on">Activation Requested</label><label class="btn btn-default active toggle-off">Activate Wallbox</label><span class="toggle-handle btn btn-default"></span></div>
    </div>
  </div>
</div>


                
                <hr>
          <div class="row">
            <div class="span6">
              <div class="control-group">
                <label class="control-label" for="wallbox"> <strong>Wallbox Label:</strong></label>
                <div class="controls">
                  <div class="input-prepend">
                    <span class="add-on"><a href="/help.php?id=wallboxlabel&height=600&width=600" rel="tooltip" class="thickbox" title="What is a Wallbox Label?"><i class="icon-question-sign"></i></a></span><input type="text" class="input-large" placeholder="Wallbox Format 32001.G A01" onChange="fixWallbox()" id="wallbox" name="wallbox"><input type="checkbox" class="input-large" value='1'...

JavaScript

$(function() {
    $('#myToggle').bootstrapToggle({
      on: 'Activation Requested',
      off: 'Activate Wallbox',
      onstyle: 'success'
    });
  })

  $(function() {
    $('#myToggle').change(function() {
      console.log('Toggle: ' + $(this).prop('checked'))
    })
  })
  
    $(function() {
    $('#wallbox_needs_patched').bootstrapToggle({
      on: 'Yes',
      off: 'No',
      onstyle: 'success'
    });
  })

  $(function() {
    $('#wallbox_needs_patched').change(function() {
      console.log('Toggle: ' + $(this).prop('checked'))
    })
  })