簡體   English   中英

填寫表單字段時按鈕未啟用

[英]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("");
};

如果有任何問題,請告訴我。 如果可能,然后臨時創建新文件並檢查它。 所以可能會有想法,它實際上是如何工作的。

演示1

演示2

問題是下面的代碼片段只會在您的 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM