two buttons in a form

[Angelo Chen]

Hi,

I got two butons in a form, how to determine in the server side which
button triggers the submission:

<form action="/post_proc">
<input type="submit" value="Submit" id="submit" />
<input type="submit" value="Cancel" id="cancel" />
</form>

Thanks,

Angelo

[Rodrigo Da Rosa Elesbao]

Why you are using 2 submit buttons?

> --
> You received this message because you are subscribed to the Google Groups "Express" group.
> To post to this group, send email to expre...@googlegroups.com.
> To unsubscribe from this group, send email to express-js+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/express-js?hl=en.
>

[tjholowaychuk]

give them both the same name, for example name="submit" and then
if (req.body.submit == 'Cancel') etc

[Angelo Chen]

Hi, that's a nice tip, it works.

one issue is, how to localize it? different language might return
different words for 'Cancel'? and ID attribute is not part of form
submitted.

[tjholowaychuk]

Yeah you have to localize them on the server as well, I dont
know of any way around that personally. I use submit inputs by
habit but you could try giving button tags a value. Let me know
if that works hahaha, I should probably use them more often

[Thomas White]

The following code can handle unlimited number of submit buttons passing  the ID of the button into a hidden input element.

Mark the clicked button:

$(document).delegate("input:submit, button:submit", 'mousedown', function(e){   

$("input:submit, button:submit").removeClass('clicked');

$(this).addClass('clicked'); 

});  

function addClickedSubmitButton($form, $submitBtn){

if( $form && $form.length  ){

$submitBtn = $submitBtn || $form.find('.clicked');

if( !$submitBtn.length ) return;

$("<input type='hidden' name='clickedSubmit' />")

.val( $submitBtn.attr('id') )

.appendTo($form);

}

}

In submit handler for the form add the following code:

   ...  

   addClickedSubmitButton(    $(this)  );

   ....

   return true;

I hope this will help.

Thomas

------

[tjholowaychuk]

buttons worked fine as I expected:


var express = require('./');
var app = express.createServer();

app.use(express.logger('dev'));
app.use(express.bodyParser());

app.get('/', function(req, res){
res.send('<form method="post"><button name="op" value="foo">Foo</
button><button name="op" value="bar">Bar</button></form>');
});

app.post('/', function(req, res){
console.log(req.body);
});

app.listen(3000);




{ op: 'bar' }
{ op: 'foo' }

On Jul 16, 6:48 pm, Angelo Chen <angelochen...@gmail.com> wrote:

[Angelo Chen]

that's a good approach, localization friendly, some said IE7 or 6 will
pick up the text instead of value when using button, probably this
will be safe with IEs?

<button name="op[foo]" >Foo2</button>
<button name="op[bar]" >Bar2</button>

in the server:

op: { bar: '' } or
op: { foo: '' }