_pages/claims/new.html

---
excerpt: none
---

{% include head.html %}
<link href="{{site.baseurl}}/stylesheets/form.css" type="text/css" rel="stylesheet" />
<body class="no-js layout-claims layout-claims-new">
  <a class="a-skip-to-main" href="#main">Skip to main content</a>
  {% include site-header.html %}
  <main role="main" id="main" class="page">
    <div class="wrapper">
      <h1>File a claim</h1>
      <form id="claim"></form>
      <div id="form-errors"></div>
    </div>
  </main>
  {% include site-footer.html %}
</body>

<script type="text/javascript" src="{{site.baseurl}}/javascripts/underscore.js"></script>
<script type="text/javascript" src="{{site.baseurl}}/javascripts/jsonform.js"></script>
<script>

// Get the JSON Schema and form definitions
//var json_form = $.get("/javascripts/form.json");
var json_schema = $.get("{{site.baseurl}}/javascripts/schema.json");

// When the schema is available, render the form
$.when(json_schema).done(function() {

    $('#claim').jsonForm({
        "schema": json_schema.responseJSON,
        "form": [
          {
            "key": "information"
          },
          {
            "key": "claimant"
          },
          {
            "key": "employment",
            "description": "Benefit eligibility is primarily determined by the claimant’s employment history. Please provide information about the claimant’s current employment."
          },
          {
            "key": "dependent"
          },
          {
            "type": "button",
            "title": "Submit"
          }
        ],
        onSubmit: function (errors, values) {
          if (errors) {
            $('.form-errors').html('<p>Please fix the below errors.</p>');
          }
          else {
            $('.form-errors').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
    });
}).fail(function() {
  console.log('Schema could not be retrieved');
});

  </script>