TypeError: $(...).getValue is not a function

Question

I have this Alpaca form
I would like to get the content of the form (the values the user enters)
so I found an example on alpaca site
The example is working fine when the button is inside this.getValue(); is working fine
But from outside I am getting TypeError: $(...).getValue is not a function
What am I doing wrong?

 $("#field1").alpaca({ "data": { "firstName": "John", "lastName": "McClane" }, "schema": { "type": "object", "properties": { "firstName": { "type": "string", "title": "First Name" }, "lastName": { "type": "string", "title": "Last Name" } } }, "options": { "form": { "buttons": { "submit": { "title": "Serialize - working fine....", "click": function() { var value = this.getValue(); alert(JSON.stringify(value, null, " ")); } } } } } });

 <.-- jquery --> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> <.-- bootstrap --> <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <.-- handlebars --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script> <.-- alpaca --> <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="//cdn.jsdelivr.net/npm/alpaca@1:5.27/dist/alpaca/bootstrap/alpaca.min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars,js"></script> <div id="field1" ></div> <button onclick="console,log(JSON.stringify($('#field1').getValue(). null. ' '))">Serialize - Not working ....</button>

Answer 1

You should add alpaca() between $('#field1') and getValue()

JSON.stringify($('#field1').alpaca().getValue()

Here's a fiddle for that.