Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Form data binding and submission in Knockout – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 23 Apr 2025
Report Abuse

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)

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

<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:

self.success = ko.observable(false);

Then update submitForm():

self.success(true);

And in the 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
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md