[英]Button not enabling when form fields are filled
我有一個表單和一個提交按鈕。當所有字段都被填寫時,只有提交按鈕將被啟用,否則它將處於禁用狀態。我指的是這個問題,但是當我在我的項目中實現這個想法時,它不起作用.即使所有字段都已填寫,按鈕仍處於禁用狀態。我不知道錯誤發生的確切位置。請幫忙。
這是我的淘汰碼。
self.newPatient = ko.asyncCommand({
execute: function(complete) {
var vm = {
name: ko.observable(""),
password: ko.observable(""),
address: ko.observable(""),
username: ko.observable("")
};
vm.isFormValid = ko.computed(function() {
return this.name() && this.password() && this.address() && this.username();
}, vm);
ko.applyBindings(vm);
var isValid=$('#addPatientForm').parsley( 'validate' );
if(isValid){
var patientJson=ko.toJSON(self.patient());
formdata.append("json",patientJson);
//self.enableButton(false);
var imagepath= $.ajax({
url: projectUrl+"newPatient",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
formdata = new FormData();
imagepath=res;
var length=self.patients().length;
var patient=self.patient();
// self.enableButton(true);
}
});
$('.alert-patient-success').show();
self.patients.removeAll();
self.getPatients();
/* $.when(self.patients.push(self.patient()),self.patient(new Patient()),self.dirtyFlag1().reset(),$('#patientTabs a:last').tab('show'))
.always(complete);*/
}
},
canExecute: function(isExecuting) {
return !isExecuting && isDirty() && isValid();
}
});
這是保存按鈕代碼。
<button class="btn btn-primary"data-bind="command: $root.newPatient, activity: $root.newPatient.isExecuting,enable: $root.newPatient.isFormValid" >
<i class="icon-ok icon-white"></i> Save
</button>
這是表格
<form id="addPatientForm" data-validate="parsley">
<div class="control-group">
<label class="control-label" for="inputIcon">Name :</label>
<div class="controls">
<div class="input-prepend" >
<span class="add-on"><i class="icon-hand-right"></i></span>
<input class="span8" type="text" data-bind="value: name,valueUpdate: 'keyup'" data-required="true" data-trigger="change" name="name">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Address :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<input class="span8" name="address" type="text" data-bind="value: address,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Gender :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<select class="span8" name="gender" data-bind="options: $root.genderOptions,value: gender,optionsCaption: 'Select Gender'" data-required="true" data-trigger="change">
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Consultant :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="cus-user_suit"></i></span>
<select class="span8" name="consultant" data-bind="options: $root.doctors,optionsText: function(item){return item.name},optionsValue:function(item){return item.username},selectedOptions: consultant,value:consultant" data-required="true" data-trigger="change">
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Username :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<input class="span8" type="text" data-bind="value: username" name="username,valueUpdate: 'keyup'" data-required="true" data-trigger="change" data-remote="${pageContext.request.contextPath}/isUserNameExists" data-remote-method="GET">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Password :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-hand-right"></i></span>
<input class="span8" type="password" data-bind="value: password" name="password,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Mobile :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="cus-phone"></i></span>
<input class="span8" type="text" data-bind="value: mobile,valueUpdate: 'keyup'" data-type="number" data-minlength="10"data-required="true" data-trigger="change" data-type="phone" name="mobile">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIcon">Email address :</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span8" type="text" data-bind="value: email,valueUpdate: 'keyup'" data-required="true" data-trigger="change" data-type="email" name="email">
</div>
</div>
</div>
</form>
請嘗試使用以下代碼片段。 通過使用文件名和文件引用,您可以輕松了解如何為淘汰賽 MVVM 創建文件夾/文件結構。
測試.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script>
<script src="ViewModels/testViewModel.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type="text" data-bind="value: EmpNo" />
<input type="text" data-bind="value: EmpName" />
<button data-bind="enable: EmpNo() != '' && EmpName() != '' ">
Submit</button>
</div>
<script type="text/javascript">
ko.applyBindings(new testViewModel());
</script>
</body>
</html>
測試視圖模型.js
var testViewModel = function () {
this.EmpNo = ko.observable("");
this.EmpName = ko.observable("");
};
如果有任何問題,請告訴我。 如果可能,然后臨時創建新文件並檢查它。 所以可能會有想法,它實際上是如何工作的。
問題是下面的代碼片段只會在您的 asyncCommand 執行時執行。 因此,您最終會得到一個與您的問題無關的表單。 要使其工作,請確保將執行處理程序外的綁定設置 (ko.applyBindings) 移至加載頁面時執行的位置。
var vm = {
name: ko.observable(""),
password: ko.observable(""),
address: ko.observable(""),
username: ko.observable("")
};
vm.isFormValid = ko.computed(function() {
return this.name() && this.password() && this.address() && this.username();
}, vm);
ko.applyBindings(vm);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.