Easy multiple image submit buttons management with Mootools

It can be interesting to have multiple image type submit buttons in a form for example to print and to submit  the form to another page.
A way to do it is to change dynamically the action attribute (in the form tag) by another value just before to send the form.

First of all, add the buttons to your form:

<form id="myform" name="myform" method="post" action="my/temp/page.html">...<input type="image" src="path/to/myimagebutton1.gif" id="btn1" rel="path/to/print/action/page.html" /><input type="image" src="path/to/myimagebutton2.gif" id="btn2" rel="path/to/submit/action/page.html" /></form>

Secondly, insert a small Javascript code after the DOMready declaration.

window.addEvent('domready',function(){        $('btn1').addEvent('click', function() {                $('myform').setAttribute('action', $('btn1').getProperty('rel'));                $('myform').setAttribute('target','_print');        });        $('btn2').addEvent('click', function() {                $('myform').setAttribute('action', $('btn2').getProperty('rel'));                $('myform').setAttribute('target','_parent');        });});

We get the action link from the rel attribute of the related image button and inject it to the action attribute of the form tag.

In the same time, it’s possible to declare the place (target) which will be active (here we have _print page for the 1st and _parent for the 2nd button).

This tip is really usefull when you use the Formcheck class!

Advertisements

One thought on “Easy multiple image submit buttons management with Mootools

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s