如何識別 alpacajs 字段元素被更改或修改？

Question

我是新來的羊駝。 我有 alpacajs 表格，也有 alpacajs 的保存按鈕。 不僅如此，我還有上一個和下一個按鈕。 我目前計划開發類似下面的東西。

例如，如果有人來到 alpacajs 表單頁面，如果他們修改了表單中的某些字段，那么在不保存的情況下，他們不能允許 go 上一個/下一個，所以我想禁用這些按鈕。 如果他們在修改后保存表單，那么他們可以 go 上一個/下一個，所以我想啟用這些按鈕。

如何用 jquery 和 alpacajs 做到這一點？

Answer 1

如果您想將表單數據保存為 alpaca 表單中的草稿表單，您只需在提交旁邊添加“另存為草稿”按鈕並為其添加一些邏輯。

因此 alpaca 將處理該按鈕上的單擊事件，但不會處理上一個/下一個按鈕。 這些按鈕不在 alpaca 配置中，它們只處理頁面導航。

向您的 alpaca 表單添加新按鈕

"form": {
  "buttons": {
    "save": {
      "title": "Save draft",
      "click": function() {
        var value = this.getValue();
        // call backend service to save the form as draft
        $.ajax({
          method: "POST",
          url: "https://httpbin.org/post", // backend webservice
          data: value // form data
         })
        .done(function(data) {
          // check some backend response code or some flag
          // with some conditions activate next and previous buttons
          $("#previousBtn").prop('disabled', false);
          $("#nextBtn").prop('disabled', false);
        })
      }
    },
    "submit": {
      "click": function() {
        var value = this.getValue();
        alert(JSON.stringify(value, null, "  "));
      }
    }
  }
}

不要忘記調用其他一些網絡服務來獲取該表單的草稿數據（如果有的話）並像這樣初始化 alpaca 數據配置：

// data initialization - here you can call a service to get draft data for this form
data = {
   username: "test"
};

$("#form").alpaca({
   "data": data, // draft data if there's any
   "schema": {
     // alpaca schema config
   }
}

這是一個工作小提琴。

Answer 2

請在下面工作示例代碼。 在此， Name和Feeback字段被標記為required項。 默認情況下，名稱字段已填充，反饋為空，這會引發錯誤並且提交按鈕被disabled ，當您在反饋字段中鍵入內容時，提交按鈕已enabled並且表單是允許提交的，因為所有required字段都已填寫。 同樣，您可以像這樣處理您的表單。

希望這可以幫助！！

 <html> <head> <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" /> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script> </head> <body> <div id="form"></div> <script type="text/javascript"> $(document).ready(function() { $("#form").alpaca({ "data": { "name": "Diego Maradona", "ranking": "excellent" }, "schema": { "title": "User Feedback", "description": "What do you think about Alpaca?", "type": "object", "properties": { "name": { "type": "string", "title": "Name", "required": true }, "feedback": { "type": "string", "title": "Feedback", "required": true } } }, "options": { "form": { "attributes": { "action": "http://httpbin.org/post", "method": "post" }, "buttons": { "submit": {} } }, "fields": { "name": { "size": 20, "helper": "Please enter your name." }, "feedback": { "type": "textarea", "name": "your_feedback", "rows": 5, "cols": 40, "helper": "Please enter your feedback." } } }, "view": "bootstrap-edit" }); }); </script> </body> </html>

如何識別 alpacajs 字段元素被更改或修改？

問題描述

2 個解決方案

解決方案1
1 已采納 2020-07-05 06:28:08

解決方案2
0 2020-07-04 03:43:25

如何識別 alpacajs 字段元素被更改或修改？

問題描述

2 個解決方案

解決方案1 1 已采納 2020-07-05 06:28:08

解決方案2 0 2020-07-04 03:43:25

解決方案1
1 已采納 2020-07-05 06:28:08

解決方案2
0 2020-07-04 03:43:25