Having multiple buttons in a page

Answer 1

Why not create one big form then differentiate the buttons with their (or other) ids?

Answer 2

You should use

<input type="button" onclick="AjaxFunction()"> 

where AjaxFunction() is a function which makes ajax-request. The form tag and submit buttons is need not for Ajax requests.

And, by the way, you can use images instead of buttons. Something like this

<img src="url" alt=""  onclick="AjaxFunction()" />

Answer 3

You should create one form and put all submit buttons into it. Buttons should have different names.

Answer 4

You can unobtrusively bind a function to a set of elements like this:

<script>
var anchors = ​document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = function() {
        alert(this.id);
        // do ajax call
        return false; 
    }
}​​​
</script>

​<a id="test" href="#">Test</a>
<a id="tes2t" href="#">Test2</a>​

Answer 5

Right now I am wrapping each button inside a form tag. Is this a good approach?

Yes, this is fine.

The only problem is that the HTML is a little on the chunky side, but that issue is largely eliminated by gzip compression (since there will be a lot of duplicate tokens, which are highly compressible).

In its favour, the method is very simple to implement, very hard to go wrong, and doesn't depend on the user having JavaScript turned on.

You can then, with very little effort, enhance the forms with onsubmit events to use JavaScript to send the data using Ajax and cancel the normal submission of the form.

Moreover, I will be replacing the button eventually by an image.

I would generally try to avoid that. A button is a clear indicator that it is something clickable that will do something. If you really want to, you can substitute the submit input for an image input.