Check for Button press and Enter press

Question

I made a expand form after button press, but now I want to add Enter key press too, but I don't know how. Maybe someone can help me!?

CODE

$(document).ready(
    function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&amp;id=7fa42966ee";
            }
        });
    });

Also I want to make 3 input field check if these are not empty.

Possible duplicate of [How to detect pressing Enter on keyboard using jQuery?](http://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery) — Justinas, Oct 05 '16 at 06:52
@Justinas there is only Enter key press, but I need both of them - button and enter key — eatmailyo, Oct 05 '16 at 06:54

score 4 · Answer 1 · answered Oct 05 '16 at 06:57

try this :

$(document).ready(
    function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&amp;id=7fa42966ee";
            }
        });



$('#form-expand').keypress(function (e) {
  if (e.which == 13) {
    $('#expand-form-button').click();
    return false;  
  }
});


    });

score 1 · Answer 2 · answered Oct 05 '16 at 07:06

I guess something like this is what you are looking for ? If you have any problems with that feel free to ask.

$('form').keypress(function (e) {
  if (e.which == 13) {                   // 13 = keycode for Enter
    $('input').each(function(){          // the 3 (or more) inputs to check
      var value = $(this).val();
      if(!(value.lenth > 0)){            // If Inputs are empty
        alert("You have to fill in the given inputs");
        return false;                    // return and don't go on
      }
    });
    $('.yourform').submit();             // submit form
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Can you add that validation in my code above this post? Im new in JavaScript and I want to see, how it looks and learn something from that :) — eatmailyo, Oct 05 '16 at 07:10

score 1 · Accepted Answer · answered Oct 05 '16 at 07:51

I am not shure if that is exactly what you want.. but I think that should be a good start!

$(document).ready(function() {

function expandFormBtn() {
    $('input').each(function(){
      var value = $(this).val();
      if(!(value.length > 0)){
        $(".form-fieldError").show(1);
        return;
      }
    });
    $("#form-expand").fadeToggle();
    $("#expand-form-button").hide(1);
    $("#mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&amp;id=7fa42966ee";
    return false;
  
}

  $(".form-fieldError").hide();
  $("#expand-form-button").click(function() {
   expandFormBtn();
  });
  
  $('form').keypress(function (e) {
    if (e.which == 13) {
      expandFormBtn();
    }
  });
});

Tanmay · Answer 4 · 2016-10-05T07:15:07.403

for enter key You need event and then you can check event=13 that is ascii for enter key

$("#entersomething").keyup(function(e) {
    alert("up");
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code==13) {
       //do something
    }


});

or you can do in keypress which I found more reliable

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

score 0 · Answer 5 · edited Jul 27 '17 at 06:47

I got something, Im trigger button click on Enter key press, thats the easiest way.

    $(document).ready(function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&amp;id=7fa42966ee";
            }
        });

     $('#sign_up_email').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#expand-form-button').click();//Trigger search button click event

        }
    });
});

Now I want to add the field validation if empty (or mistake on email), then show div ,where is error

Check for Button press and Enter press

5 Answers5