How to simulate the action in a form when submit?

Question

first: always is the same action. two: the form has multiple "CSS SUBMITS" like

<form action="/myaction" method="POST">
<a id="foo1" name="foo1" href="#" role="form_button">submit1!</a>
<a id="foo2" name="foo2" href="#" role="form_button">submit2!</a>
<a id="foo3" name="foo3" href="#" role="form_button">submit3!</a>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
<script>
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('form').submit(); } );
</script>

how can I do in /myaction this:

if ($_POST['foo1']) { action; return; } // :(
if ($_POST['foo2']) { action; return; } // :(
if ($_POST['foo3']) { action; return; } // :(
if ($_POST['canfoo']) { action; return; } // THIS WORKKKKKSS!!

How can I do to foo1, foo2, foo3 to work?

(I use jQuery like:

$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('#actiontodo').val(this.id); $('form').submit(); } );

), then, in the other side (action),

I do:

IF ($_POST['ACTIONTODO'] == "foo") { action; return; }

BUT, I DON'T LIKE THIS SOLUTION! I WANT THE <A behave as well as <input type="submit"

Thank you very much for your help!

Answer 1

You shouldn't give priority to visual over usability, that's a huge mistake. Anyway, you can stylize any button/input to suit your needs without any problem, just grab a good CSS tutorial.

Don't reinvent the wheel.

Answer 2

You can use any element you want to trigger a .submit() event.

• http://api.jquery.com/submit/

For example, this form:

<form id="targetForm" action="/myaction">
   <input type="text" value="Oh hai!"/>
</form>

Can be submitted by the following jQuery:

$('#targetForm').submit();

However, you can style buttons and input fields without too much trouble in CSS.

Update:

I'd agree with Ben that you should reconsider doing form submissions this way.

For multiple submission triggers..

So if you have multiple triggers you need a hidden field to record this information for POST.

Something like this will do the trick...

<form id="targetForm" action="/myaction">
   <input type="text" name="myText" value="Oh hai!"/>
   <input type="hidden" name="whichTrigger" value="default" />
</form>

And then each trigger would do ...

$('#whichTrigger').val("myTriggerName"); // A different value for each one of course.
$('#targetForm').submit();

Answer 3

I solved this problem as is:

<form action="/myaction" method="POST">
<div id="foo1" name="foo1" href="#" role="form_button"><button type="submit">submit1!</button></div>
<div id="foo2" name="foo2" href="#" role="form_button"><button type="submit">submit2!</button></div>
<div id="foo3" name="foo3" href="#" role="form_button"><button type="submit">submit3!</button></div>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>

!!!!!!!!!!!!!!!!!!! THANKS!