Input fields live update

In this example below you will see how to do a Input fields live update with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Pondake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Pondake ©
  • HTML
  • CSS
  • JavaScript
    <div class="scherm1">
                        <p>Hoeveel mensen wil je verwerken?</p>
                        <h2 class="foutmeldingInschrijven">Jeff</h2>
                        <input type="text" placeholder="AANTAL" class="aantalMedewerkersInput" id="aantalMedewerkers"><br>

                        <table class="table">
                            <tbody><tr>
                                <td>Aantal medewerkers<br></td>
                                <td><span class="aantalMedewerkers">0</span></td>
                            </tr>
                            <tr>
                                <td>Bedrag per maand<br></td>
                                <td>€ <span class="bedragVoorStart">0</span>,00<br></td>
                            </tr>
                            <tr>
                                <td>Starttarief</td>
                                <td><span>€15,00</span></td>
                            </tr>
                            <tr>
                                <th>Nu betalen</th>
                                <th>€ <span class="bedragNaStart">0</span>,00<br></th>
                            </tr>
                            </tbody></table>

                    </div>

/*Downloaded from https://www.codeseek.co/Pondake/input-fields-live-update-PJBaod */
    body{
  position: relative;
  display: inline-block;
  background: #fff;
}
.scherm1{
  display:block;
  margin: 0 auto;
  background: #eeee;
}


/*Downloaded from https://www.codeseek.co/Pondake/input-fields-live-update-PJBaod */
    jQuery(document).ready(function ($) {
    // $('.scherm1').hide();
    $('.scherm2').hide();
    $('.scherm3').hide();

    $("#aantalMedewerkers").bind("change paste keyup", function () {
        var aantalMedewerkers = document.getElementById("aantalMedewerkers").value;
        var prijsVoorStart = aantalMedewerkers * 2;
        var startTarief = 15;

        $(".bedragVoorStart").text(prijsVoorStart);
        $(".bedragNaStart").text(prijsVoorStart + startTarief);
   $(".aantalMedewerkers").text(aantalMedewerkers);
    });

    $("#juistKnopScherm1").click(function (e) {
        if ($('#aantalMedewerkers').val() != "") {
            $('.scherm1').hide("slide", {direction: "left"}, 500);
            setTimeout(function () {
                $('.scherm2').show("slide", {direction: "right"}, 500);
            }, 500);
        } else {
            $(".foutmeldingInschrijven").show();
            $(".foutmeldingInschrijven").text("Je hebt geen medewerkers aantal ingevoerd!");
        }
    });

    $("#juistKnopScherm2").click(function () {

        var bedrijfsnaam = $("#bedrijfsnaam");
        var kvknummer = $("#kvknummer");
        var btwnummer = $("#btwnummer");
        var ibannummer = $("#ibannummer");
        var adres = $("#adres");
        var plaats = $("#plaats");
        var voornaam = $("#voornaam");
        var achternaam = $("#achternaam");
        var email = $("#email");
        var telefoonnummer = $("#telefoonnummer");

        $.ajax({
            type: "POST",
            url: "engine/inschrijf_proces.php",
            data: {
                bedrijfsnaam: bedrijfsnaam.val(),
                kvknummer: kvknummer.val(),
                btwnummer: btwnummer.val(),
                ibannummer: ibannummer.val(),
                adres: adres.val(),
                plaats: plaats.val(),
                voornaam: voornaam.val(),
                achternaam: achternaam.val(),
                email: email.val(),
                telefoonnummer: telefoonnummer.val()
            }
        });

        $('.scherm2').hide("slide", {direction: "left"}, 500);
        setTimeout(function () {
            $('.scherm3').show("slide", {direction: "right"}, 500);
        }, 500);
    });

});

Comments