---
title: "Form data binding and submission in Knockout"  
description: "Form data binding and submission in Knockout"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34051/form-data-binding-and-submission-in-knockout  
category: "knockcout js"  
tags: ["knockout.js", "knockout.js data-binding"]  
reading_time: 4 minutes  

---

# Form data binding and submission in Knockout

## What You’ll Learn

1. Binding form inputs (textboxes, checkboxes, selects) to observables
2. Submitting form data via a function
3. Using validation or success messages (optional)

## Step-by-Step Example: Simple Contact Form

## ViewModel (JavaScript)

```javascript
function ContactFormViewModel() {
  const self = this;

  // 1. Bind input fields
  self.name = ko.observable("");
  self.email = ko.observable("");
  self.message = ko.observable("");

  // 2. Handle submission
  self.submitForm = () => {
    // Just showing an alert for now
    alert("Form Submitted:\n" +
          "Name: " + self.name() + "\n" +
          "Email: " + self.email() + "\n" +
          "Message: " + self.message());

    // Reset form
    self.name("");
    self.email("");
    self.message("");
  };
}

ko.applyBindings(new ContactFormViewModel());
```

## HTML Form

```html
<h2>Contact Us</h2>

<form data-bind="submit: submitForm">
  <div>
    <label>Name:</label>
    <input type="text" data-bind="value: name" required />
  </div>

  <div>
    <label>Email:</label>
    <input type="email" data-bind="value: email" required />
  </div>

  <div>
    <label>Message:</label>
    <textarea data-bind="value: message" required></textarea>
  </div>

  <button type="submit">Send</button>
</form>
```

## How It Works

1. Each input field is bound to an observable using `value:`.
2. The form uses `submit: submitForm` so Knockout takes over the submit event.
3. When submitted:

   - The function accesses the observable values using `.name()`, etc.
   - You can send them via `fetch`, `$.ajax`, or to an API as needed.
   - It resets the fields after submission.

## Bonus: Show a success message

Add this to your ViewModel:

```javascript
self.success = ko.observable(false);
```

Then update `submitForm()`:

```javascript
self.success(true);
```

And in the HTML:

```html
<div data-bind="visible: success">
  Thank you! Your message has been sent.
</div>
```

### Summary

| Feature | What It Does |
| --- | --- |
| `value` binding | Syncs form input to observable |
| `submit` binding | Attaches handler function to form submission |
| `observable()` | Stores form input values |
| `alert()` / AJAX | Use values for alerts or to send to a server |
| `visible` binding | Great for success or error messages |

## Answers

### Answer by ICSM Computer

## What You’ll Learn

1. Binding form inputs (textboxes, checkboxes, selects) to observables
2. Submitting form data via a function
3. Using validation or success messages (optional)

## Step-by-Step Example: Simple Contact Form

## ViewModel (JavaScript)

```javascript
function ContactFormViewModel() {
  const self = this;

  // 1. Bind input fields
  self.name = ko.observable("");
  self.email = ko.observable("");
  self.message = ko.observable("");

  // 2. Handle submission
  self.submitForm = () => {
    // Just showing an alert for now
    alert("Form Submitted:\n" +
          "Name: " + self.name() + "\n" +
          "Email: " + self.email() + "\n" +
          "Message: " + self.message());

    // Reset form
    self.name("");
    self.email("");
    self.message("");
  };
}

ko.applyBindings(new ContactFormViewModel());
```

## HTML Form

```html
<h2>Contact Us</h2>

<form data-bind="submit: submitForm">
  <div>
    <label>Name:</label>
    <input type="text" data-bind="value: name" required />
  </div>

  <div>
    <label>Email:</label>
    <input type="email" data-bind="value: email" required />
  </div>

  <div>
    <label>Message:</label>
    <textarea data-bind="value: message" required></textarea>
  </div>

  <button type="submit">Send</button>
</form>
```

## How It Works

1. Each input field is bound to an observable using `value:`.
2. The form uses `submit: submitForm` so Knockout takes over the submit event.
3. When submitted:

   - The function accesses the observable values using `.name()`, etc.
   - You can send them via `fetch`, `$.ajax`, or to an API as needed.
   - It resets the fields after submission.

## Bonus: Show a success message

Add this to your ViewModel:

```javascript
self.success = ko.observable(false);
```

Then update `submitForm()`:

```javascript
self.success(true);
```

And in the HTML:

```html
<div data-bind="visible: success">
  Thank you! Your message has been sent.
</div>
```

### Summary

| Feature | What It Does |
| --- | --- |
| `value` binding | Syncs form input to observable |
| `submit` binding | Attaches handler function to form submission |
| `observable()` | Stores form input values |
| `alert()` / AJAX | Use values for alerts or to send to a server |
| `visible` binding | Great for success or error messages |


---

Original Source: https://www.mindstick.com/interview/34051/form-data-binding-and-submission-in-knockout

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.