JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div data-role="content" id="angebot">
    <div class="application">
        <form id="angebotForm" method="POST">
            <div>
                <input type="hidden" value="UpdateValues" name="function"></input>
            </div>
            <fieldset>
                <legend> <strong>Ihr Angebot</strong>

                </legend>
                <p>
                    <label><span>Preis (Brutto pro Behandlung in €):</span>

                    </label>
                    <input type="number" maxlength="10" data-bind="value: angebot" style="display: inline" class="validate[required,custom[number]]" id="Preis"></input>
                </p>
                <p>
                    <label>Voraussichtliche Anzahl der Transporttage:</label>
                    <input type="number" disabled="disabled" data-bind="value: tage" style="display: inline" class="text disabled" id="Tage"></input>
                </p>
                <p>
                    <label>Voraussichtliche Gesamtkosten (Brutto in €):</label>
                    <input type="number" disabled="disabled" data-bind="value: formatted" style="display: inline" class="text disabled" id="Gesammtsumme"></input>
                </p>
            </fieldset>
        </form>
    </div>
    <p style="text-align: center"> <a data-role="button" id="angebotWeiterleiten" data-icon="arrow-r" data-iconpos="right" data-transition="slide" data-ajax="false">Angebot
                abgeben</a>

    </p>
</div>

JavaScript

var Angebot = function (transporttage) {
        var self = this;
        self.angebot = ko.observable("6");
        self.tage = ko.observable(transporttage);

        self.formatted = ko.computed(function () {
            var preis = self.angebot();
            var tage = self.tage();
            preis = preis.replace(/,/, ".");
            return parseFloat(preis) * parseFloat(tage);
        });
    };

    ko.applyBindings(new Angebot(''));