Documentation / Tutorials / SPA

Event: Submit - single submit button

/ SPA / Event: Submit - single submit button

[templates.add basic_form]

//** HTML novalidate: to disable html 5 validations **//
<section role='xyz-form'>
<form id="scheme_form" novalidate>

//** Form fields in bootstrap format **//
<div class="form-group">
Field Label
Field Element
<div class='help-block'></div>
</div>

<button type='submit' class='btn btn-primary'>Submit</button>
</form>

//** Java Script to bind form submit **//
<script type=spa/axn
axn='form.ajax'
bind='submit'
bind_selector='#scheme_form'
route_ajax='[module.slug/].basic_form_submit'
disable_selector='.btn'
data-safe_id=[app.safe_id/] >
</script>
</section>

[/templates.add]

[templates.add basic_form_submit]
//**
avoid using direct request params always take request param in variable and use variable
**//
[template.set req='{request}' /]

//** server side validate and process data **//

//** Update section with thank you block **//
<template axn=control.update control='main.sections.xyz-form' get='me.html' data-safe_id=[app.safe_id/]>

<h5>html to put into section</h5>

//**
Sample: how to run script after submit
**//

<script type=spa/axn axn='core.run_script' data-safe_id=[app.safe_id/]>
alert("Cool script run after submit");
</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 '
Sample: <script type=spa/axn axn='core.redirect' url='' data-safe_id=[app.safe_id/] confirmation=''>
**//

<script type=spa/axn axn='core.redirect' url='' data-safe_id=[app.safe_id/]></script>

</template>
[/templates.add]

Categories
Most Popular

Leave a Reply

Your email address will not be published.