checkbox form field name is not submitted when form submits knockout js

Question

I am trying to get the all form fields when user submits the form, the problem is with checkbox field that is when the checkbox is checked the name is submit to server but if this is unchecked then the checkbox is not submit to server, I am using knockout latest version Here is my working code:

<form data-bind="submit: submitForm">
    <input type="checkbox" name="checkboxTest" data-bind="checked : value" />
    <input type="text" name="textTest" value="Test" />
    <button type="submit"> Submit</button>
</form>

And here is my ViewModel:

function viewModel(data)
    {
        self.value = ko.observable(true);
        // when user submit the form
        self.submitForm =  function(fields)
        {
            var dataparams = $(fields).serialize();
            // The form fields name are showing here
            console.log(dataparams);
        }
    }
    ko.applyBindings(new viewModel);

Could anyone tell me how to get the checkbox even if that is unchecked using knockoutjs, thank you in advance.

The viewModel maintains an updated `value` observable. Is it not an option to submit the VM instead? — Francis Nepomuceno, Mar 29 '16 at 16:00
When submitting, can the server accept JSON instead? If so, it's easier to send the viewmodel data, instead of serializing the entire form — Francis Nepomuceno, Mar 29 '16 at 16:09
Yes. I need in json form. Could you please write some code how that can be done? — Kashif Ullah, Mar 29 '16 at 16:11
Check this thread: http://stackoverflow.com/questions/3029870/jquery-serialize-does-not-register-checkboxes — Adrian, Mar 30 '16 at 04:32

Matin Kajabadi · Answer 1 · 2016-03-29T21:31:39.067

1

jQuery serializes the successful controls within the form.Only "successful controls" are serialized to the string. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked which makes sense since they are a boolean state .If you want to have all inputs in your object you can add them manually.Or if you want to store value of true or false in your DB, instead of using checkbox you can use <select> with the value of 0 and 1 (YES ,NO)

edited Mar 29 '16 at 21:31

answered Mar 29 '16 at 15:39

Matin Kajabadi

3,414
1
17
21

Thank you for the answer, but I can't add them manually as I have a form where I have provided the options for users to add more form fields, in that case if I have 20 check boxes form fields I have to maintain an array to track their values but this is not the optimize solution, I need something to get all the form fields either successful or unsuccessful. – Kashif Ullah Mar 29 '16 at 15:51

score 0 · Answer 2 · answered Mar 29 '16 at 17:19

0

Here's an example:

HTML:

<form data-bind="submit: submitForm, with: form">
  <input type="checkbox" name="checkboxTest" data-bind="checked : value" />
  <input type="text" name="textTest" value="Test" />
  <button type="submit"> Submit</button>
</form>

JS:

function viewModel() {
  this.value = ko.observable(true);
}

function parentViewModel() {
  var self = this;

  self.form = ko.observable();

  // when user submit the form
  self.submitForm = function() {
    var dataparams = ko.toJSON(self.form);
    // The form fields name are showing here
    console.log(dataparams);
  };
}

var vm = new parentViewModel();
vm.form = new viewModel();

ko.applyBindings(vm);

Then you should get the properties in JSON. In this case, either {"value": true} or {"value": false}

Working example

answered Mar 29 '16 at 17:19

Francis Nepomuceno

4,935
4
29
35

Thank you @Neps, but what about other form fields, as the user will add more form fields dynamically, such as input fields, checkbox, etc. how can I get all other fields reside in this current form tag. – Kashif Ullah Mar 29 '16 at 17:31
You can add observables to the viewModel and bind them to their corresponding fields. – Francis Nepomuceno Mar 29 '16 at 18:43
No, I can't do that as form fields are coming from server in json form such as {"name": "Text Box", "type": "text", "value": ""},{"name": "Check Box", "type": "checkbox", "value": true}, {"name": "Date Field", "type": "date", "value":"2016-03-29 07:00:00"}, and it will become complicated as I can't track how many fields are coming from database and keep observables for each. – Kashif Ullah Mar 29 '16 at 18:50

checkbox form field name is not submitted when form submits knockout js

2 Answers2