Detect type of submit, if it was by enter key or button click

Question

I have the following code:

    <head>
        <script language="javascript">
            function subimiti(event){
                alert("Tipo do submit: "+event);
            }
        </script>
    </head>
    <body>
        <form id="f1" name="form1" onsubmit="subimiti(event)" action="http://www.google.com">
            <input type="text" id="meuId" value="Teste"/>
            <input id="butao" type="submit" value="Subimeta u fórmi trem bão!!"/>
        </form>

In my JavaScript function I want to detect the event that causes the form submit. If it was by an enter key in my text field, or if it was by clicking on the button.

possible duplicate of [Determine which element submitted a form from within onsubmit](http://stackoverflow.com/questions/541869/determine-which-element-submitted-a-form-from-within-onsubmit) — dsgriffin, Jun 26 '13 at 20:07

Fabi · Accepted Answer · 2013-06-27T02:48:40.370

Since the keypress event fires the click event when there's a submit button, the only workaround that I can think of is having a type=button instead.

Pure javascript (Fiddle):

<form id="f1" name="form1" action="" onsubmit="subimiti(this)" method="POST">
  <input type="text" id="meuId" value="Test" onkeypress="setEvent(event)"/>
  <input id="butao" type="button" onclick="setEvent(event)" value="Subimeta u formi trem bao!!"/>
</form>

function subimiti(form)
{
  event.preventDefault();
  alert(form.getAttribute('event'));   

}

function setEvent(event)
{
 if(event.type == 'click')
 {
   document.form1.setAttribute('event','click');
   subimiti(document.form1);
 }
 else if (event.keyCode == 13)
 {
   document.form1.setAttribute('event','keypress');
 }
}

Using jQuery (cleaner/easier code in my opinion):

$(function(){
  $('form').submit(function(){
    alert($(this).attr('event'));
  });

  $("input#butao").on('click', function(e) {
    $("form").attr("event", "click").submit();
  });      

  $("input").on('keypress', function(e) {
    if (e.which == 13)
    {
      $("form").attr("event", "keypress");
    }
  });            
});

There's a click listener for butao only and enter listener for any input.

<form id="f1" name="form1" action="">
  <input type="text" id="meuId" value="Teste"/>
  <input id="butao" type="button" value="Subimeta u formi trem bao!!"/>
</form>

Fiddle (added preventDefault to fiddle so you could see the results without actually submitting)

+1 : `input[type=submit]` will always trigger both events (`click` and `enter`). Nice workaround, however you just forgot to add that this uses jQuery (the OP doesn't have the jQuery tag in his question) — JFK, Jun 27 '13 at 00:37

Detect type of submit, if it was by enter key or button click

1 Answers1