OpenTimeTracker/application/forms/layouts/accountFormLayout.phtml

<?php echo $this->formstart(); ?>
<?php echo $this->fields['pin'] ?>
<div class="row">
    <div class="small-12 columns">
      <ul class="button-group even-3">
          <li><button id='seven' value="7" href="#" class="button keyButton secondary">7</button></li>
          <li><button id='eight' value="8" href="#" class="button keyButton secondary">8</button></li>
          <li><button id='nine' value="9" href="#" class="button keyButton secondary">9</button></li>
          <li><button id='four' value="4" href="#" class="button keyButton secondary">4</button></li>
          <li><button id='five' value="5" href="#" class="button keyButton secondary">5</button></li>
          <li><button id='six' value="6" href="#" class="button keyButton secondary">6</button></li>
          <li><button id='one' value="1" href="#" class="button keyButton secondary">1</button></li>
          <li><button id='two' value="2" href="#" class="button keyButton secondary">2</button></li>
          <li><button id='three' value="3" href="#" class="button keyButton secondary">3</button></li>
      </ul>
        <ul class="button-group even-2">
            <li><button id='zero' value="0" href="#" class="button keyButton secondary">0</button></li>
            <li><button href="#" class="clearKeyPad button keyButton secondary"><i class="fa fa-close"></i> Clear</button></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <?php echo $this->fields['submit'] ?>
        <?php echo $this->formend(); ?>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.keyButton').click(function() {
            $value = $(this).val();
            $("#pin").val($("#pin").val()+$value);

            var $count = $('#pin').val().length;

            if($count == 4)
            {
                $("#auth_form").submit();
            }
            else
            {
                return false;
            }
        });

        $('.clearKeyPad').click(function(){
            $("#pin").val('');
            $("#errorMessage").foundation('reveal','close');
            return false;
        });
    });
</script>