The goal
--------

Read content from DOM element with KnockoutJS.

The problem
-----------

I have a list of products in my HTML. The code is something like this:

```
<li>
    <div class="introduction">
        <h3>@Model["ProductName"]</h3>
    </div>
    <form data-bind="submit: addToSummary">
        <input type="number" 
               placeholder="How much @Model["ProductName"] do you want?" />
        <button>Add product</button>
    </form>
</li>

```

When I click on `<button>Add Product</button>`, I want to send to KnockoutJS the text inside `<h3></h3>` of the element that was submitted.

The file to work with KnockoutJS is *external* and *independent* of HTML. It name is `summary.js` and the code is below:

```
function ProductReservation(id, name, unity, quantity) {
    var self = this;

    self.id = id;
    self.name = name;
    self.unity = unity;
    self.quantity = quantity;
}

function SummaryViewModel() {
    var self = this;

    self.products = ko.observableArray([
        new ProductReservation(1, "Testing", "kgs", 1)
    ]);

    self.addToSummary = function () {
        // Do Something
    }
}

```

What I'm thinking about
-----------------------

**HTML:**

```
<li>
    <div class="introduction">
        <h3 data-bind="text: productName">@Model["ProductName"]</h3>
    </div>
    [...]
</li>

```

**JS:**

```
productName = ko.observable("text: productName");

```

But, of course, no success — this is not the correct context or syntax, was just to illustrate.

So I ask: what I need to do?