Question 44905 in Html Question posted in
Some basic documentation can be found here.

use the enter key to submit <input> with javascript – Html

with my current program i am makeing a simple sign in form with the use of javascript.
i have it set up but cant set up the text field to use the enter key as another way to submit the current input field. i am using javascript to proform these functions but am unable to find the solution.

here is my code
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7781ca377a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <title>simple form</title>
</head>
<body>
<!-- icons by fontawesome.com -->
    <form>
        <div class="field-name">
            <i class="fa-solid fa-user"></i>
            <input type="text" placeholder="Username" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-email innactive">
            <i class="fa-solid fa-envelope"></i>
            <input type="email" placeholder="Email" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-password innactive">
            <i class="fa-solid fa-key"></i>
            <input type="password" placeholder="Password" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-finish innactive">
            <i class="fa-solid fa-heart"></i>
            <p>Thank you!</p>
            <i class="fa-solid fa-heart"></i>
        </div>
    </form>

    <script src="app.js"></script>
</body>
</html>

style.css

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    background-color: rgb(87, 189, 130);
    transition: background 0.5s ease;
    position: relative;
}

.field-name, .field-email, .field-password, .field-finish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 50px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.field-name i, .field-email i, .field-password i, .field-finish i {
    padding: 10px;
}

.field-name i:last-child, .field-email i:last-child, .field-password i:last-child, .field-finish i:last-child {
    padding: 10px;
    cursor: pointer;
}

.field-name input, .field-email input, .field-password input {
    background: none;
    border: none;
    flex: 1;
    height: 100%;
    outline: none;
}

div.innactive{
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

div.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

@keyframes shake{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50%{
        transform: translate(-50%, -50%) rotate(10deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }   
}

app.js

function animatedForm() {
    const arrows = document.querySelectorAll('.fa-arrow-right');
    
    arrows.forEach(arrow => {
        arrow.addEventListener("click", () => {
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        });
    });
    
}

//check if username or password has more than 6 characters 
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87");
    } else {
        error("rgb(87, 189, 130");
        return true;
    }
}

//check if email is valid 
function validateEmail(email){
    const validation = /^[^s@]+@[^s@]+.[^s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130");
        return true;
    } else {
        error("rgb(189,87,87");
    }
}

//change which input is active 
function nextSlide(parent, nextForm){
    parent.classList.add('innactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

//change background color if you fail to meet minimum requirements 
function error(color){
    document.body.style.backgroundColor = color;
}

//start
animatedForm();

i have atempted a plethora of resourses from external websites like https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp

and https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

but i dont know after atempting the implement these resourses if they work or not.

Tags:

2

Answers


  1. 0

    You can use the keypress event listener, to resolve your query.

    Notice I have given the id as myForm to the form.

    You have to use the JS like this

    const form = document.getElementById("myForm");
const inputs = form.querySelectorAll("input");

inputs.forEach((input) => {
  input.addEventListener("keypress", (e) => {
    if (e.keyCode === 13) {
      console.log("Enter key");
      // do whatever you want when the Enter key is pressed
    }
  });
});
    <form id="myForm">
            <div class="field-name">
                <i class="fa-solid fa-user"></i>
                <input type="text" placeholder="Username" required> 
                <i class="fa-sharp fa-solid fa-arrow-right"></i>
            </div>
            <div class="field-email innactive">
                <i class="fa-solid fa-envelope"></i>
                <input type="email" placeholder="Email" required> 
                <i class="fa-sharp fa-solid fa-arrow-right"></i>
            </div>
            <div class="field-password innactive">
                <i class="fa-solid fa-key"></i>
                <input type="password" placeholder="Password" required> 
                <i class="fa-sharp fa-solid fa-arrow-right"></i>
            </div>
            <div class="field-finish innactive">
                <i class="fa-solid fa-heart"></i>
                <p>Thank you!</p>
                <i class="fa-solid fa-heart"></i>
            </div>
        </form>

    I have given a forEach loop for all input but you can validate the input and change the action accordingly.

    Login or Signup to reply.
  2. 0

    You can add another event listener on keypress, and check if the keycode is 13(Enter key) if so apply your conditions, So your code will be like this:

    function animatedForm() {
const arrows = document.querySelectorAll('.fa-arrow-right');
const inputs = document.getElementsByTagName("form")[0].querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("keypress", (e) => {
        if (e.keyCode === 13) {
            const parent = input.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        }
      });
    });
    
    arrows.forEach(arrow => {
        arrow.addEventListener("click", () => {
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        });
    });
    
}

//check if username or password has more than 6 characters 
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87");
    } else {
        error("rgb(87, 189, 130");
        return true;
    }
}

//check if email is valid 
function validateEmail(email){
    const validation = /^[^s@]+@[^s@]+.[^s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130");
        return true;
    } else {
        error("rgb(189,87,87");
    }
}

//change which input is active 
function nextSlide(parent, nextForm){
    parent.classList.add('innactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

//change background color if you fail to meet minimum requirements 
function error(color){
    document.body.style.backgroundColor = color;
}

//start
animatedForm();
    * {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    background-color: rgb(87, 189, 130);
    transition: background 0.5s ease;
    position: relative;
}

.field-name, .field-email, .field-password, .field-finish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 50px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.field-name i, .field-email i, .field-password i, .field-finish i {
    padding: 10px;
}

.field-name i:last-child, .field-email i:last-child, .field-password i:last-child, .field-finish i:last-child {
    padding: 10px;
    cursor: pointer;
}

.field-name input, .field-email input, .field-password input {
    background: none;
    border: none;
    flex: 1;
    height: 100%;
    outline: none;
}

div.innactive{
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

div.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

@keyframes shake{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50%{
        transform: translate(-50%, -50%) rotate(10deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }   
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7781ca377a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <title>simple form</title>
</head>
<body>
<!-- icons by fontawesome.com -->
    <form>
        <div class="field-name">
            <i class="fa-solid fa-user"></i>
            <input type="text" placeholder="Username" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-email innactive">
            <i class="fa-solid fa-envelope"></i>
            <input type="email" placeholder="Email" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-password innactive">
            <i class="fa-solid fa-key"></i>
            <input type="password" placeholder="Password" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-finish innactive">
            <i class="fa-solid fa-heart"></i>
            <p>Thank you!</p>
            <i class="fa-solid fa-heart"></i>
        </div>
    </form>

    <script src="app.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search