Submit form from javascript

[Bojan Cincur <bl...@gmail.com>]

Hello everyone

I'm not going to write any question today :)

I'm just posting solution for this problem.

There is typical use case, when you want something to happen and to not
click on submit button. Or even to do something and not to see submit
button.

I had a problem with implementing rating component, use case was when user
click on one of stars to submit result to server and display new calculated
rating for that particular page/item that is shown.


So I started coding, I was thinking about form with hidden submit button and
all of crazy AJAX stuff that I need to do.

But I found very interesting solution. I did not use any hidden submit
button at all.

Here is how all is going

first in tml you have something like this.

<div class="starContainer">
>
> <form t:type="form" t:id="rateForm">
>
>  <t:radiogroup t:id="vote">
>
>                              <t:radio t:id="oneStar" class="star"
>> value="oneStar"/>
>
>                              <t:radio t:id="twoStars" class="star"
>> value="twoStars"/>
>
>                              <t:radio t:id="threeStars" class="star"
>> value="threeStars"/>
>
>                              <t:radio t:id="fourStars" class="star"
>> value="fourStars"/>
>
>                              <t:radio t:id="fiveStars" class="star"
>> value="fiveStars"/>
>
>                 </t:radiogroup>
>
>  </form>
>
> </div>
>
>
radio buttons are used to chose rating, here is example for 5 stars system.
Of course some fancy java script will create stars from them. And there is
so many so choose one :)

Now I want to do something here, so i created onFormSubmit method so I can
submit all this with submit button component. and here goes code for it.

@OnEvent(value = "submit", component = "rateForm")
void onFormSubmit() {

some back end code to apply ratings...

}

Now you have onFormSubmit that is fired when you submit a form.

And after 2 tons of code and trying with hidden submit buttons and all other
thing, this was enough.

I simply added javasript at beging of form (PS i wrote a component so i put
it there, you can put it anywhere :) )

<script>
jQuery(document).ready(function(){

jQuery(".star").click(function(){
this.form = $(rateForm);
this.form.submit();
});

});

</script>

So I'm basicly added listener that waits for click on one of radio buttons,
and call submit on rateForm.


Of course you need to add jQuery library, but this is also possible with
prototype but I'm more familiar with jQuery...

If you want to add jQuery in your application there is great way to do this:

http://tapestry.formos.com/nightly/ioko-tapestry-commons/tapestry-jquery/



If someone know how to do this in prototype, be my guest and add code :)

That is all for today:)
I hope that this code help somebody :)
-- 
Bojan Ćinćur
email blueboy6@gmail.com
Skype bojan.cincur

Re: Submit form from javascript

["Thiago H. de Paula Figueiredo" <th...@gmail.com>]

Em Wed, 02 Dec 2009 20:54:38 -0200, Inge Solvoll <in...@gmail.com>  
escreveu:

> Here's code for submitting a zone form.
> http://tinybits.blogspot.com/2009/10/missing-javascript.html

Thanks for pointing that. It's way more elegant than my solution. :)

-- 
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor
Owner, software architect and developer, Ars Machina Tecnologia da  
Informação Ltda.
http://www.arsmachina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org

Re: Submit form from javascript

[Inge Solvoll <in...@gmail.com>]

Here's code for submitting a zone form.

http://tinybits.blogspot.com/2009/10/missing-javascript.html


On Wed, Dec 2, 2009 at 10:53 PM, Thiago H. de Paula Figueiredo <
thiagohp@gmail.com> wrote:

> Em Wed, 02 Dec 2009 19:25:04 -0200, Bojan Cincur <bl...@gmail.com>
> escreveu:
>
>  Hello everyone
>>
>
> Hi!
>
> Just some comments . . .
>
> AFAIK, form.submit() doesn't work with AJAX form submissions,
> submit.click() does.
>
> --
> Thiago H. de Paula Figueiredo
> Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,
> and instructor
> Owner, software architect and developer, Ars Machina Tecnologia da
> Informação Ltda.
> http://www.arsmachina.com.br
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

Re: Submit form from javascript

["Thiago H. de Paula Figueiredo" <th...@gmail.com>]

Em Wed, 02 Dec 2009 19:25:04 -0200, Bojan Cincur <bl...@gmail.com>  
escreveu:

> Hello everyone

Hi!

Just some comments . . .

AFAIK, form.submit() doesn't work with AJAX form submissions,  
submit.click() does.

-- 
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor
Owner, software architect and developer, Ars Machina Tecnologia da  
Informação Ltda.
http://www.arsmachina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org