How to submit a form with a click on an arbitrary element.

This is real live code for Bandtastic.me
What i wanted to accomplish was a clickable div with a text box in it that submits a form, this is to bypass the limitations of a regular form that needs a submit button.
I'm posting this because it was a real pain to get this functionallity and i hope somebody can save itself the trouble.

So you have a div with a textbox in it, roughly this







And you want to be able to submit the contents of the textbox as a regular html form.

<form method='GET' action='/post' id='myform'>
    <input  type='text' id='mytextbox' value='100' />
</form>

Something like that, so no button anywhere to be found.
You can style your form as a regular div, like i did in the screenshot.
Now the magic would rely on jquery so remember to include it in your html and then would be this

$(function(){ 

   $('.custom_contribution *').click(function(event){
        event.stopImmediatePropagation()
        if(! $(event.currentTarget).is('input#custom_ammount')){
            $('.custom_contribution').submit();
        }
    }); 
})

Lets analyze this
First we target all the elements on our form using the *, so when any or subelement can be used to submit the form

   $('.custom_contribution *').click(function(event)(

Then we stop the propagation of the event so if there are elements underneath that jquery also considers clicked we only get one

        event.stopImmediatePropagation()

Then we check with if the clicked element is not our textbox

        if(! $(e.currentTarget).is('input#custom_ammount')){ 

We do this converting the dom element that e.currenTarget returns to a jquery object surrounding it with

$()

we do this so we can the use

is()

method that will return true if the element is our textbox, and because we have a boolean negation ! the next line of code only will run if we clicked anything but the textbox.
We submit the form with another handy jquery method.

            $('.custom_contribution').submit();

This allow us to have a huge clickable button while mantaining the form functionality, because if you type something in the textbox and then hit enter, it will also submit it.
Thats it, if you have any questions or remarks leave a comment.