One event handler for multiple keyup events

Question

I want to instantly display the user's input so each input has a corresponding display div.

The html:

<div class="row">
    <div class="col-lg-3">
        <?php echo $this->Form->input('contact_person'); ?>
    </div>
    <div class="col-lg-3">
        <?php echo $this->Form->input('mobile'); ?>
    </div>
    <div class="col-lg-3">
        <label for=""><?php echo __('Contact Person'); ?></label>
        <div id="test1"></div>
    </div>  
    <div class="col-lg-3">
        <label for=""><?php echo __('Mobile'); ?></label>
        <div id="test2"></div>
    </div>
</div>

The JavaScript:

$('#PostContactPerson').keyup(function(){
   $('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
   $('#test2').html(this.value);
});

I am new to JavaScript; is there a way to combine all these same scripts so one key function handles all instant input display?

Answer 1

$('input').keyup(function(){
  var outputId = null;
  switch ($(this).attr('name')) {
      case 'contact_person': outputId = '#test1'; break;
      case 'mobile': outputId = '#test2'; break;
  }
  $(outputId).html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
    <div class="col-lg-3">
        <input name='contact_person' type="text" />
    </div>
    <div class="col-lg-3">
        <input name='mobile' type="text" />
    </div>
    <div class="col-lg-3">
        <label for="">Contact Person</label>
        <div id="test1"></div>
    </div>  
    <div class="col-lg-3">
        <label for="">Mobile</label>
        <div id="test2"></div>
    </div>
</div>

Consider this (I changed the HTML for the example to work, but your HTML is just fine)

But you may want to change the ID of your output fields:

$('input').keyup(function(){
  $('#output_'+$(this).attr('name')).html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <input name='contact_person' type="text" />
  </div>
  <div class="col-lg-3">
    <input name='mobile' type="text" />
  </div>
  <div class="col-lg-3">
    <label for="">Contact Person</label>
    <div id="output_contact_person"></div>
  </div>  
  <div class="col-lg-3">
    <label for="">Mobile</label>
    <div id="output_mobile"></div>
  </div>
</div>

In this case the ID of the output field is the same as the name of your input field, but with a prepended "output_"

Or if you have some fields which shoudl not work with output field, consider telling the input-fields that they have an output field:

$('input').keyup(function(){
  var outputId = $(this).data('output');
  if (outputId) {
    $(outputId).html($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <input name='contact_person' type="text" data-output="#test1" />
  </div>
  <div class="col-lg-3">
    <input name='mobile' type="text" data-output="#test2" />
  </div>
  <div class="col-lg-3">
    <label for="">Contact Person</label>
    <div id="test1"></div>
  </div>  
  <div class="col-lg-3">
    <label for="">Mobile</label>
    <div id="test2"></div>
  </div>
</div>

Notice the data-output-attribute to link to output-div.