当表单提交knockout js时,不会提交复选框表单字段名称

时间:2016-03-29 15:21:30

标签: javascript jquery forms checkbox knockout.js

我试图在用户提交表单时获取所有表单字段,问题是复选框字段,当选中复选框时,名称将提交给服务器,但如果未选中此复选框,则复选框不会提交给服务器,我正在使用淘汰赛最新版本这是我的工作代码:

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

这是我的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);

如果使用knockoutjs取消选中,有人可以告诉我如何获取复选框,提前谢谢。

2 个答案:

答案 0 :(得分:1)

jQuery序列化表单中的成功控件。只有“成功控件”被序列化为字符串。来自checkboxesradio buttons的值(“radio”或“checkbox”类型的输入)仅在检查时才包含,因为它们是布尔状态。如果您想要输入所有输入您可以手动添加它们的对象。或者,如果您想在数据库中存储truefalse的值,而不是使用checkbox,则可以使用值<select> 01(是,否)

答案 1 :(得分:0)

以下是一个例子:

HTML:

var startTime = DateTime.Now.AddDays(-1);
var endTime = DateTime.Now;

var query = string.Format("*[System[TimeCreated[@SystemTime >= '{0}']]] and *[System[TimeCreated[@SystemTime <= '{1}']]]",
    startTime.ToUniversalTime().ToString("o"),
    endDate.ToUniversalTime().ToString("o"));

var elq = new EventLogQuery("Applicaton", PathType.LogName, query);

JS:

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

然后你应该用JSON获取属性。在这种情况下,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); {"value": true}

Working example