如何使用knockout.js从文本框中获取值的值

Question

以下代码用于从文本框中获取值。代码同时显示值，但我想使用单击绑定，以便调用我的java脚本并显示值。每次显示值时，它还应显示输入的旧值

<div>
    <table>
        <tr><td>First name</td><td> <input type="text" class="inputs" id="first" data-bind="text: $data" /></td></tr>
        <tr><td>Last name</td><td> <input type="text" class="inputs" id="Text1" data-bind="text: $data" /></td></tr>
        <tr><td>Dob</td><td> <input type="text" class="inputs" id="Text2" data-bind="text: $data" /></td></tr>
        <tr><td>Description</td><td> <textarea rows="5" cols="17" class="inputs" id="Text3" data-bind="text: $data"></textarea></td></tr>
        <tr><td><input type="button" value="submit" onclick="AppViewModel()" /></td></tr>
    </table>

    <h2>The values entered will be</h2>
    <table border="1">
        <tr><td>First Name </td><td><input type="text" class="inputs" id="first" data-bind="value: foobar; valueUpdate: 'keyup'"></input></td></tr>
        <tr><td>Last Name </td><td><input type="text" class="inputs" id="Text4" data-bind="value: good; valueUpdate: 'keyup'" /></td></tr>
        <tr><td>Dob</td><td> <input type="text" class="inputs" id="Text5" data-bind="value: bad; valueUpdate: 'keyup'" /></td></tr>
        <tr><td>Description</td><td> <textarea rows="5" cols="16" class="inputs" id="Text6" data-bind="value: ugly; valueUpdate: 'keyup'"></textarea></td></tr>
    </table>
</div>

<script>
    function AppViewModel() {

        this.foobar = ko.observable('');
        this.good = ko.observable('');
        this.bad = ko.observable('');
        this.ugly = ko.observable('');
        var val = document.getElementById('first').value;

        if (!val.match(/^[a-zA-Z]+$/ || val == "")) {
            alert('Please fill the boxes correctly');

            return false;
        }
        var last = document.getElementById('Text1').value;

        if (!last.match(/^[a-zA-Z]+$/ || val == "")) {
            alert('Please fill the boxes correctly');
            myform.last.focus();
            return false;
        }


        var myDate = document.getElementById('Text2').value;
        var myDatePattern = /^[0-3]{1}[0-9]{1}\/[0|1]{1}[0-9]{1}\/[0-9]{4}$/;
        var validFormat = myDatePattern.test(myDate);

        if (validFormat == true) {

            var myDay = myDate.substring(0, 2);
            var myMonth = myDate.substring(3, 5);
            var myYear = myDate.substring(6, 10);

            if (myDay > 31 | myDay < 1) {
                alert('You have entered an invalid day');
                var day = false;
            }
            else {
                var day = true
            };

            if (myMonth > 12 | myMonth < 1) {
                alert('You have entered an invalid month');
                var month = false;
            }
            else {
                var month = true
            };

            var now = new Date();
            if (myYear > now) {
                alert('You have entered an invalid year. Please use a date before today');
                var year = false;
            }
            else {
                var year = true
            };

            if (day == false | month == false | year == false) {
                alert('You have entered an invalid date format');
            };

        }


    }
    ko.applyBindings(new AppViewModel());
</script>

请帮忙。