Question

so im using a simple submit binding to pass a function data:

<form data-bind="submit: printTest">
    Enter a weight in the box: <BR>
    <INPUT TYPE="text" id="inputWeight" VALUE=""><P>
    <button type="submit">Submit</button>
</form>

i just started working with KO so i was to write a basic print function to test this input out:

self.printTest = function(xxx){

        var myTextField = xxx;
    if(myTextField.value != "")
        alert("You entered: " + myTextField.value)
    else
        alert("Would you please enter some text?")
    }

my problem is when i hit submit i get a “you entered: undefined” but when i refresh the page the input that is in the form gets an alert. this is very frustrating! idk if this is a knockout problem or a simple HTML one.

Answer 1

You haven’t showed all the code so I’ll attempt to answer this based on what’s above. First the submit binding simply executes a function when the form is submitted and allows you to stop/confirm the form should submit.

When submit fires it is passed the form dom element, it is not passed the input value so this code could never work.

To print the value of the input you first need to bind the value of the input to a value on your model.

<input type="text" id="inputWeight" value="" data-bind="value: inputWeight" />

You can then alert the value like so.

var viewModel = function () {
    var self = this;
    self.inputWeight = ko.observable();

    self.printTest = function() {

        var valueEntered = self.inputWeight();
        if(valueEntered) {
            alert("You entered: " + valueEntered);
        }
        else {
            alert("Would you please enter some text?");
        }
    }
};

Heres the working fiddle

FYI – Your initial code/markup had some errors, missing semi-colons incorrect markup which I fixed.

Hope this helps.