CODEWITHSUNDEEP
javascripthtmlbootstrap-4bootstrap-modal
Yagami Light
Yagami Light

Reputation: 1796

On enter key, form is submitted

I am using bootstrap input tags like this

myPage.html

<form th:object="${field}" name="modal" method="post" th:action="@{/ajouterFieldEcran}">
 ...

 <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
        <input type="text" class="form-control col-sm-12" value=""
            data-role="tagsinput" id="tags">
                </div>
            </div>


 ...

I get the example from this post Bootstrap tags input not displaying the tags

The problem is when I am typing the value and press enter to submit it in the input the form that is submitted.

Upvotes: 2

Views: 842

Answers (1)

kiranvj
kiranvj

Reputation: 34137

You can disable enter key in input tags like this

$(function() {
 $("input").keydown(function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
 });
});

put this inside your script tag

Remove col-sm-12 from input class, you don't need that.

Also please note that you cannot use enter key in a text box for new line (input type='text' are single line by design), for multiline text you need to use textarea

Upvotes: 2

Related Questions