The Golf Web Application Server home roadmap1.0 help rss

Handling POST Data And Forms

29 Dec 2009 - Micha Niskinsourcedownloaddemo

Golf applications handle form submissions in a very simple and straightforward way. Form data is handled in your JS code, via a regular onsubmit event handler. To illustrate the technique we will construct a simple application and name it, say, golf-example.

We will make a component in which we will create the form (see A Simple Component). Let’s call the component FormExample. The FormExample.html file should contain the following:

<div>
  <style type="text/golf">
  </style>
  <script type="text/golf">
    function() {
      $("form").submit(
        function() {
          $("span").text($("input[name='info']").select().val());
        }
      );
    }
  </script>
  <h2>Form Example</h2>
  <p>You entered '<span></span>'.</p>
  <form>
    <input type="text" name="info"/>
    <input type="submit"/>
  </form>
</div>

Notice where the actual handling of the form is taking place, right in the JS event handler. Normally you would perform an AJAX request at this point, to upload the form data to the server for processing.

In order to make this an app we will also need a controller, of course. Create a simple controller.js file with the following contents:

$.golf.controller = [
  { route: ".*",
    action: function(container, params) {
      container.append(new Component.FormExample());
    }
  }
];

Now start the Golf server in local dev mode. Open a terminal and go to the golf-example directory. Then do

golf .

Open a browser window and navigate to http://localhost:4653/golf-example/#/home/. You should see something like this:

Try submitting the form with and without JS enabled in your browser. It should do the same thing either way. You can also try setting the method attribute of the form element to post, and trying it that way. It works in both regular and proxy modes in either case.

blog comments powered by Disqus
Fork me on GitHub