0

You'll have to forgive me for asking a somewhat trivial question here, but I'm generally curious if there's a better way of detecting if a button has been pressed. I'm guessing this would apply to anchor tags also.

Presently I have two submit buttons (so I cannot use $(form).submit in this case), both of which will change another field when they are activated:

<button id="accept" type="submit">Accept</button>
<button id="decline" type="submit">Decline</button>

To achieve this I have detected a click event, and the Enter keypress event separately:

$('#accept').click(function(){ $('#decision').val('Agree');  })
$("#accept").keyup(function(event){
    if(event.keyCode == 13){
        $('#decision').val('Agree');
    }
});

I guess more than anything I'm wondering if there is a way to simplify this code, as it's rather cumbersome, especially if there's a lot of processing (you could create a function, but that's yet another step) and since jQuery seems to have most things covered, I'm surprised after trawling the internet I can't find a cleaner solution.

(with the above I was worried about other ways to mimic the button press, such as hitting space, although that seems to be covered!)

Thanks!

Nick
  • 3,745
  • 20
  • 56
  • 75

4 Answers4

2

you can do something like this to make the click a little better: (using a function is necessary here to get something better):

function setDecision(value){
    $('#decision').val(value);
}

$('button[type=submit]').click(function() {
    var val = $(this).text();

    setDecision(val);
});

$("button[type=submit]").keyup(function(event){
    var val = $(this).text();

    if(event.keyCode == 13){
        setDecision(val);
    }
});
Evan
  • 5,975
  • 8
  • 34
  • 63
  • Ah, I figured a function may be necessary, thank you, but this code is nice and flexible! – Nick Jun 20 '12 at 14:49
2

For a button element, both the spacebar and the enter key being presses on a button will generate a click event according W3C event specifications. You should not have to do any special processing to handle that.

As for using $(form).submit(), you can. Just change your buttons to not implicitly submit the form by chaning them to push buttons (W3C):

<button type="button" id="...">...</button>

Then in your handler you can do:

$('#accept,#decline').click(function(event){
    $('#decision').val($(event.target).text());
    $(form).submit();
}

If you need to you can do some processing on $(event.target).text() to make 'Decline' null/emptystring if necessary.

Andrew Martinez
  • 3,714
  • 3
  • 35
  • 38
  • Ah! I never knew that, that'd also explain why the spacebar is triggering the event, thank you! Great solution too – Nick Jun 20 '12 at 15:01
1

I think I understand your question, and there may be some precedence to be found in this related topic.

jQuery: how to get which button was clicked upon form submission?

This method avoids adding the .click() event to each button, though that may be a viable option for your application.

Hope this helps! Mason

Community
  • 1
  • 1
MasonWinsauer
  • 673
  • 3
  • 14
  • 32
  • Thank you, that wasn't exactly what I was asking, but it does provide a very nice alternative solution! :-) – Nick Jun 20 '12 at 14:48
1

Add name="decision" and value="Accept" / value="Decline" (accordingly) to the submit buttons

This way you do not need javascript to handle this at all...

And if the 'Accept' button is the first, then pressing enter inside any form field will also trigger that one

Sample:

<form action="1.html" method="get">

<input type="text" name="in">

<button type="submit" name="decision" value="Accept">Accept</button>
<button type="submit" name="decision" value="Decline">Decline</button>

</form>
poncha
  • 7,726
  • 2
  • 34
  • 38
  • Many thanks, a good solution but unfortunately (as discussed on another question here earlier) due to the way I'm doing jQuery calls I do need the hidden function – Nick Jun 20 '12 at 14:53