How to identify alpacajs field element is changed or modified?

Question

How to identify alpacajs field element is changed or modified?

582 Views Asked by Senthurkumaran At 04 July 2020 at 03:22

I am new to alpacajs. I have alpacajs form and also have save button for alpacajs from. More than that i have previous and next button. I currently plan to develop something like below.

For example if someone come to the alpacajs form page and if they modified some fields in form then without save they can't allow to go previous/ next so i want to disable those button. If they save the form after the modification then they can go previous/ next so i want to enable those button.

How to do this with jquery and in alpacajs?

Original Q&A

There are 2 best solutions below

solanki... On 04 July 2020 at 03:43

Please, working sample code below. In this, Name and Feeback fields are marked as required and. Bydefault, Name field is filled, Feedback is empty which throws error and Submit button is disabled, As you type something in Feedback field, Submit button got enabled and form is beig allow to submit because all required fields got filled. Similarly, you can handle your form like this.

Hope this helps !!

<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/[email protected]/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/[email protected]/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>

**Oussama BEN MAHMOUD** · Accepted Answer · 2020-07-05T06:28:08.803000

If you want to save the form data as draft form in your alpaca form you have only to add the Save as draft button next to your submit and put some logic to it.

So alpaca will handle the click event on that button, but not for Previous / Next buttons. These buttons stays out of alpaca config, and they handle only page navigation.

To add a new button to your alpaca form

"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, "  "));
      }
    }
  }
}

Don't forget to call some other webservice to get the draft data for that form if there's any and initialize alpaca data config like this:

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

Here's a working fiddle for this.

How to identify alpacajs field element is changed or modified?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in ALPACAJS

Trending Questions

Popular # Hahtags

Popular Questions