How to implement a cancel button in a form using Jade

[victorkane]

Using Jade, if I have a form ending with buttons so:

p.buttons
input(type='submit', value='Submit changes')
input(type='submit', value='Cancel edits')

what is the recommended way to detect which button was pressed in the
routing function:

app.put('/user', function(req, res) {

...

});

Any recommendations to try out will be appreciated.

[Darrell Banks]

Hmmmm..... it would seem that if the user pressed "cancel", you wouldn't want to pass any information to the server at all right?

--
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.

[victorkane]

On Aug 5, 5:52 pm, Darrell Banks <banks.busin...@gmail.com> wrote:
> Hmmmm..... it would seem that if the user pressed "cancel", you wouldn't
> want to pass any information to the server at all right?
>
>

I would need to make a server side redirect upon cancel. Let's suppose
the user is at her profiile page, hits "edit", then decides to cancel:
she should be redirected back to the profile page.

[vision media [ Tj Holowaychuk ]]

give the input a name like "op" or something, then you'll get the value

--
Tj Holowaychuk
Vision Media
President & Creative Lead

[vision media [ Tj Holowaychuk ]]

and then switch (req.body.op){ case '....': etc

[victorkane]

Thanks Tj! Works like a charm!

On Aug 5, 6:20 pm, "vision media [ Tj Holowaychuk ]" <t...@vision-

media.ca> wrote:
> and then switch (req.body.op){ case '....': etc
>
> On Fri, Aug 5, 2011 at 2:20 PM, vision media [ Tj Holowaychuk ] <
>
>
>
>
>
>
>
>
>
> t...@vision-media.ca> wrote:
> > give the input a name like "op" or something, then you'll get the value
>

[Darrell Banks]

Yup tjs got the right idea

[victorkane]

Just to document in case someone else has the same question:

The jade form ends like this:

input(type='submit', name="op", value='Submit changes')
input(type='submit', name="op", value='Cancel edits')

And then in the routing:

app.put('/user', function(req, res) {

if (req.body.op == 'Cancel edits') return res.redirect('/user');
... do something else if not ...
});

More elegantly, an "id" attribute could be used to avoid the use of
the human readable value in the conditonal.

Thanks to all so much for such prompt discussion on the subject!

On Aug 5, 6:41 pm, Darrell Banks <banks.busin...@gmail.com> wrote:
> Yup tjs got the right idea

[vision media [ Tj Holowaychuk ]]

I dont think browsers would submit the id though, unless you intervene with js at least. I agree though it's brittle to rely on value

[Branko Vukelić]

On 2011-08-05 15:17 -0700, victorkane wrote:
> More elegantly, an "id" attribute could be used to avoid the use of
> the human readable value in the conditonal.

Try this:

button(type="submit", name="op", value="s") Submit Changes
button(type="submit", name="op", value="c") Cancel Edits

--
Branko Vukelic
bra...@herdhound.com
bg.b...@gmail.com

Lead Developer
Herd Hound (tm) - Travel that doesn't bite
www.herdhound.com

Love coffee? You might love Loveffee, too.
loveffee.appspot.com

[Branko Vukelić]

On 2011-08-06 00:47 +0200, Branko Vukelić wrote:
> On 2011-08-05 15:17 -0700, victorkane wrote:
> > More elegantly, an "id" attribute could be used to avoid the use of
> > the human readable value in the conditonal.
>
> Try this:
>
> button(type="submit", name="op", value="s") Submit Changes
> button(type="submit", name="op", value="c") Cancel Edits

If you don't like button tags, you could do this:

var SUBMIT = 'Submit Changes';
var CANCEL = 'Cancel Edits';

switch ( req.param('op') ) {
case SUBMIT:
// Commit
break;
case CANCEL:
// Redirect
break;

[Laurie Harper]

Nope, for type=submit inputs you always get the value, and that's the human-readable string -- I always thought that was a mis-feature...

Branko's suggestion to use buttons is one option; another I often use would look like this:

  input(type='submit', name='op_save', value='Save Changes')

  input(type='submit', name='op_cancel', value='Cancel Edits')

Then switch on the presence of op_save / op_cancel in the request params. 

Hidden gotchya with either approach: if the user submits the form by hitting enter and focus isn't on one of the submit buttons, the request will not contain any submit-button-related params, so the server-side logic needs to look something like:

  if (req.param('op_cancel')) { 

    /* redirect */ 

  } else {

    /* assume op_save */

  }

L.

-- 

Laurie Harper

http://laurie.holoweb.net/