Documentation / Tutorials / Tutorials & How to’s

Submit form with handler

/ Tutorials & How to’s / Submit form with handler

There are few steps to follow to submit the simple form.

Write your HTML for form:

  1. Add form entries CPT to save your form into it.
  2. Add your code of form in main template.
  3. Write ajax request for submit form in <script> tag as in given example. In bind we have to pass the event. In bind_selector we have to pass either form which is submitted or button's class. In route_ajax we have to pass the template name which is playing role as handler of the form.
  4. Write second template as form handler. It will work for:
    • Saving the current form in given CPT.
    • Show the thank you message. In this we are using template tag to replace the content with thank you message by selector given in selector attribute of it.
    • Mail the information to Admin and user.
[aw2.template main] 
<form role='employee-detail'>
 <div class="add-employee">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" name="as_entries|meta|f_name" 
           id="as_entries|meta|f_nam">
  </div>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" name="as_entries|meta|email" 
           id="as_entries|meta|email">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </div>
</form>
 <script  type=spa/axn 
          axn='form.ajax'
          bind='submit'
          bind_selector="form[role='employee-detail']" 
          route_ajax='[aw2.get module.slug /].save_emp_details'></script>

[/aw2.template]

[aw2.template save_emp_details]
 [aw2.save_form tag='as_entries' set_post_id='module.entry_id']
 {
    "post_type":"as_entries",
    "post_status":"publish",
    "post_title" :"[aw2.get request.as_entries|meta|f_name /]"
 }
 [/aw2.save_form]

  <template axn=selector.replace selector='.add-employee' get='me.html'>
     <p class="brand-success font-size-large text-center pad-x-3">Thank you.</p>
     <p class="brand-success font-size-large text-center pad-x-3">
       Your form has been successfully submitted. We will get back to you soon.
     </p>
     <div class="gap-3"></div>
  </template>  
[/aw2.template]

 

Categories
Most Popular