Documentation / Tutorials / SPA

Form Submission

/ SPA / Form Submission

#1. Form
<section role='xyz-form'>
//** HTML novalidate: to disable html 5 validations **//
<form id="example_form" novalidate>
Name: <input type="text" name="first_name" />
Email: <input type="text" name="email" />
<button type='submit' class='btn btn-primary'>Submit</button>
</form>

<div class="ajax-reply"></div>

#2. Java Script to bind form submit
<script type="spa/axn"
axn='form.ajax'
bind='submit'
bind_selector='#example_form'
//** id of the form **//
route_ajax="[aw2.get module.slug /].whatever-template-name"
disable_selector='.btn'>
//** Disable the button once AJAX request fired, so no one can click on the button again while request is processing... **//
</script>
</section>

#3. Template that will handle the submitted data and show the JS alert
[aw2.template whatever-template-name]
<template axn="selector.update" selector=".ajax-reply" get="me.html">
<h5>HTML reply to show into the section</h5>
<script type="spa/axn" axn="core.run_script">
alert("Script received from server after submit (JS default alert)");
</script>

//**
Sample: page redirect
Empty url will reload current page
you can use alert & confirmation on any script tag
attribute: alert='Your data is submitted'
attribute: confirmation='Your data is submitted, do you want to reload page?'
**//
<script type="spa/axn" axn="core.run_script" alert="Script received from server after submit (aw alert)"></script>

<script type="spa/axn" axn="core.redirect" url="" confirmation="Your data is submitted, do you want to reload page? (aw confirmation)"></script>
</template>
[/aw2.template]

Categories
Most Popular

Leave a Reply

Your email address will not be published.