setPlaceHolderTextBasedOnLabelContent

by robhortn

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="col-md-5" for="targetName">What is your name please?</label>
          <div class="col-md-6">
            <input id="targetNameId" name="targetName" class="form-control input-md" />
          </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
       <label class="col-md-5" for="question">How can we improve?</label>
       <div class="col-md-6">
         <input id="questionId" name="question" class="form-control input-md" />
       </div>
      </div>
     </div>
  </div>
</body>

JavaScript

function setPlaceHolders() {
  var trgFound;
  console.log('setPlaceHolders activated');

  var inputs = document.getElementsByTagName('input');
  var labels = document.getElementsByTagName('label');

  for (var i = 0; i < inputs.length; i++ ) {
    trgFound = document.getElementById(inputs[i].id);
    if (trgFound) {
      for (var x = 0; x < labels.length; x++ ) {
        if (labels[x].htmlFor === trgFound.name) {
          trgFound.placeholder = labels[x].innerHTML;
        }
      }
    }
  }    
}

setPlaceHolders();