Maklerrechner

by Kevin Pliester

HTML

<div class="container">

  <input type="text" name="1" placeholder="Kaufpreis" value="195000" disabled />
  <input type="text" name="2" placeholder="Grunderwerbssteuer" value="6825" disabled />
  <input type="text" name="3" placeholder="Grundbuch u. Notarkosten" value="2925" disabled />
  <input type="text" name="4" placeholder="Maklerprovision" value="9282" disabled />
  <input type="text" name="5" placeholder="Gesamtkosten" value="" disabled />

  <hr />

  <input type="text" name="6" placeholder="Eigenkapital" value="38000" />
  <input type="text" name="7" placeholder="Benötigtes Darlehen" value="" />

</div>

CSS

input,
hr {
  width: 100%;
  display: block;
  maring-bottom: 5px;
}

.container {
  max-width: 400px;
  margin: 5% auto;
}

JavaScript

jQuery(function($) {

  var Kaufpreis = parseInt($('input[name=1]').val());
  var Grunderwerbssteuer = parseInt($('input[name=2]').val());
  var GrundbuchUndNotarkosten = parseInt($('input[name=3]').val());
  var Maklerprovision = parseInt($('input[name=4]').val());
  var GesamtKosten = parseInt($('input[name=5]').val());
  var Eigenkapital = parseInt($('input[name=6]').val());
  var Rechnung1 = Kaufpreis + Grunderwerbssteuer + GrundbuchUndNotarkosten + Maklerprovision;
  var Rechnung2 = Rechnung1 - Eigenkapital;

  $('input[name=5]').val(Rechnung1);
  $('input[name=7]').val(Rechnung2);

  $('input[name=6]').on('keyup keydown', function() {

    Eigenkapital = parseInt($(this).val());

    if ($(this).val()) {
      Rechnung2 = Rechnung1 - Eigenkapital;
      $('input[name=7]').val(Rechnung2);
    }

  });

  $('input').each(function(i) {
    $(this).before('<label>' + $(this).attr('placeholder') + '</label>');
  });

})