Documentation / Tutorials / SPA

Event: Submit - multiple submit buttons

/ SPA / Event: Submit - multiple submit buttons

[templates.add multi_action_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>

<div class="text-center">

<button id="action-1" data-safe_id="[app.safe_id/]" type="button" class="btn btn-primary btn-multi-action" data-txn="action-a">Action A</button>

<button id="action-2" data-safe_id="[app.safe_id/]" type="button" class="btn btn-primary btn-multi-action" data-txn="action-b">Action B</button>

</div>
</form>

//** Javascript to bind form submit and decide activity**//

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

<script data-safe_id="[app.safe_id/]" type="spa/axn" axn="core.run_script" bind="click" bind_selector=".btn-multi-action">
var el=o.block.trigger;
$("#scheme_form").attr('activity_type',$(el).attr('data-txn')).submit();
</script>

</section>
[/templates.add]

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

<section role="main">
<div><div><section role='xyz-form'>Tag will be prevented</section></div></div>
</section>

//** do actions for action-a **//
[template.return content c.cond="template.req.activity_type" c.eq="s:action-a"]
<template axn=control.update control='main.sections.xyz-form' get='me.html' data-safe_id=[app.safe_id/]>
</template>
[/template.return]

//** do actions for action-b **//
[template.return content c.cond="template.req.activity_type" c.eq="s:action-b"]

[/template.return]

//** do actions if no activity_type matching **//
[template.return content]
<template type=spa/axn axn='core.run_script' alert='Invalid Activity type' data-safe_id="[app.safe_id/]"></template>
[/template.return]

[/templates.add]

Categories
Most Popular

Leave a Reply

Your email address will not be published. Required fields are marked *