html form tag submit on enter key

Question

I have problem with <form> tag which reacts to 'enter key'.

My html codes are below:

<html>
<head>
    <title>Poring</title>

    <meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1 text/html; charset=utf-8">

    <script src="./js/jquery.ajax-cross-origin.min.js"></script>

    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
                $(document).ready(function() {

                        $("div.input-group > :text").keypress(function(data){
                                if(data.which == 13) {
                                        if ($("div.tags").children().length == 5) {
                                                alert("maximum 5.");
                                                $("div.input-group > :text").val('');
                                                return;
                                        }
                                        if ( $("div.input-group > :text").val() != "") {
                                                $("div.tags").append('<input name="favorites" class="btn-custom2 btn-floatleft" type="button" value="' + $("div.input-group > :text").val() + '">');
                                                $("div.input-group > :text").val('');

                                        }
                                }
                        });
                        $("div.tags").on('click', ':button', function() {
                                $(this).remove();
                        });


                        function readURL(input) {
                                if (input.files && input.files[0]) {
                                        var reader = new FileReader();

                                        reader.onload = function (e) {
                                                $('.col-md-4 > img').attr('src', e.target.result);
                                        }                               

                                        reader.readAsDataURL(input.files[0]);
                                }
                        }       

                        $(":file").change(function(){
                                readURL(this);
                        });

                });
    </script>   
</head>

    <body style="background-color:#3591cd;">
        <div class="login-wrapper">
                <a href="login.html" class="center-poring"><img src="img/poring.png"></a>
                 <div class="signup-container shadow" style="margin-bottom:30px;">                  
                      <form class="form-login " action="login.html" onkeydown="return stopKeyPress(event)">
                        <h2 class="form-login-heading">sign up</h2>
                        <div class="login-wrap row">
                                <div class="col-md-4">
                                        <img alt="profile picture css" class="pic-circle-corner img-profile" src="img/img-profile-empty.png" />
                                        <div class="file_input_div">
                                                <button class="btn-custom1 img-profile file_input_img_btn">profile</button>
                                                <input type="file"class=" file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value"></input>
                                        </div>
                                </div>
                                <div class="col-md-8">
                                    <input type="email" class="form-control" placeholder="email" autofocus>
                                    <br>
                                    <input type="text" class="form-control" placeholder="name">
                                    <br>
                                    <input id="password1" type="password" class="form-control" placeholder="password">
                                    <br>
                                    <input id="password2" type="password" class="form-control" placeholder="password check">    
                                </div>
                                        <div class="login-wrap" style="margin:10px;" >
                                                        <p style="color:#000000;">favorites (maximum-5)</p>
                                                <div class="input-group">

                                                        <div class="input-group-addon"><img src="img/ic-tag.png"></div>    
                                                        <input type="text" class="form-control" placeholder="enter the tag">    
                                                </div>    
                                                <div class="tags">    
                                                </div>  
                                        </div> 
                           <div id="login-link">
                                <input type="submit" value="sign up" class="btn btn-theme btn-block btn-signup signup-button">
                           </div>    
                        </div>    
                      </form>    

                </div>
          </div>
          <script>
            function stopKeyPress(data) {
                if(data.which == 13) {
                    return false;
                }
            }
            function formValidation() {
                alert('hello');
                if ($("#password1").val() != $("#password2").val() ||
                        ($("#password1").val().length == 0 || $("#password2").val().length == 0))
                    return false;
                else
                    return true;
            }
          </script>
        </body>
</html>

From here all the <input> belong to one <form> tag. If I use 'enter key', the form is submitted. So, I stop it using stopKeyPress() function.

Now, when I use 'enter key', the form is not submitted. It's what I want to do.

But, from the <input type="text" class="form-control" placeholder="enter the tag">, when I enter some text in this <input type="text">, I want to use 'enter key' to make new <input type="button"> whose value is <input type="text">'s value.(It's on the <head>'s javascript code).

But, because I stop to react with 'enter key' in this <form> tag, this also doesn't react to 'enter key'.

Is there any solutions that <input type="text"> reacts to 'enter key', while submit is not allowed to 'enter key'? How can it be done?

Possible duplicate of [Javascript submit textbox on ENTER](http://stackoverflow.com/questions/8894226/javascript-submit-textbox-on-enter) — kind user, Nov 17 '16 at 10:00
Why don't you just make the `submit`-button `disabled` until the form is done (properly filled), and/or the `submit`-button has `focus`? — junkfoodjunkie, Nov 17 '16 at 10:00
Possible duplicate of [Detect the Enter key in a text input field](http://stackoverflow.com/questions/7060750/detect-the-enter-key-in-a-text-input-field) — Mr.7, Nov 17 '16 at 10:01
I know how to react to 'enter key', but because I stop to react to 'enter key' in the `
` tag, any `` doesn't react to 'enter key' whatever the functions are — user7159879, Nov 17 '16 at 10:18

score 0 · Answer 1 · edited May 23 '17 at 10:30

You should add an id to your input like this

<input type="text" id="t1">

the idea is to add a Event listener or to simply call a function from javascript.

Functions from javascript

html

<input type="text" id="t1" onKeyPress="myFunction(e,val)">

Javascript

<script>

function myFunction(e,input) {
    console.log("Do your stuff");
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) { //Enter keycode
              alert('enter press'); 
}
</script>

in var code I put a ternary operator.

e is event var in javascript

if you want to access input type , you can use jquery with $("#t1")

try this link event.preventDefault() vs. return false

'enter key' doesn't react to function, because I stop the 'enter key' about the `
`. So, `` which belongs to `
` doesn't react to 'enter key' — user7159879, Nov 17 '16 at 10:15

score 0 · Answer 2 · answered Nov 17 '16 at 10:22

Add an id to the input tag on which you want to perform the action.

<input type="text" id="addNewBtn">

instead calling stopKeyPress() on form, call it on keypress of inputs. and exclude the input which you want to work on keydown/keypress

i.e

$(document).ready(function(){
  $('#formid').on('keydown','input',function(e){
     if($(this).attr('id') != 'addNewBtn'){
          stopKeyPress(e);
       }
    });
});

html form tag submit on enter key

2 Answers2