How to use JS and AJAX as event handler of <button> to post form's data in Lungo?

Lungo's example file I can find so far, there is no tag, to have form elements only placing and tag as this code snippet.

<div class="form">
  <fieldset class="radius-top" data-icon="user">
    <input type="text" placeholder="Your username" id="txt-signup-name" value="">
  </fieldset>
  <button class="anchor" data-icon="lock" data-icon="user" data-label="Login"></button>
</div>

When the user pressed the Login button, how do I submit the form's data, I have searched google someone said about using event handler and AJAX, but I really cannot find any examples, so please help by giving me some example how to get it done.

Thanks.

Solution

Lungo has some AJAX functions : Lungo.Service.* , including Get, Post.

Where do you want to send the form's data? If it is on a remote server, then you can detect the button click and then execute Lungo.Service.get(...) with the right parameters for your situation.

Check out Lungo's documentation

You could also use QuoJs Ajax's function.

UPDATE

I started working with Monocle by Tapquo (developers of Lungo) and I have to say the markup is pretty neat. In my opinion, much less intrusive than say, Angular. In fact, with Monocle, you don't touch your HTML at all. Everything is done with Javascript with the help of the MVC pattern.

For example, if you want to show a list of items, formatted in a particular way, you would do the following.

In your HTMl, you just add an empty container:

<ul id="items"></ul>

Than, in your Monocle's model, you define an item class. To populate your container, you would create a view :

class __View.ListItems extends Monocle.View
 container: "ul#items"

 template: """        # mustache template
   <li>
     <strong>{{Name}}</strong>
     <small>{{description}}</small>
   </li>

In your controller, you simply append every item in the database to the view :

view = new __View.ListItems model:item
view.append item for item in __Model.Item.all()

And voilà! Your container is filled with all your items and for that, you didn't need to modify your HTML markup.

--> In angular, if I recall well, you would need to add an ng-controller statement and ng-each or something.