interview

home / developersection / interviews / form data binding and submission in knockout

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow
Can you answer this question?
Answer

1 Answers

ICSM Computer

ICSM Computer

23-Apr-2025

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
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy