0

Necesito saber como hacer que los dos botones que tengo en 2 formularios diferentes al precionar enter ejecute la funcion y vacie los datos que estan en los input.

$('.toggle').click(function(){
    $('.formulario').animate({
        height: "toggle",
        'padding-top': 'toggle',
        'padding-bottom': 'toggle',
        opacity: 'toggle'
    }, "slow");
});

var users = [];
var names = [];
var lnames = [];
var passs = [];
var cuentas = [users,names,lnames,passs];


users.push("admin");
names.push("Administrador");
lnames.push("principal");
passs.push("12345")


function registro(){
    users.push(document.getElementById('user').value);
    names.push(document.getElementById('name').value);
    lnames.push(document.getElementById('lname').value);
    passs.push(document.getElementById('pass').value);
}


var userlog;
var passlog;
function login(){
    userlog = document.getElementById('userlogin').value;
    passlog = document.getElementById('passlogin').value;
    if(userlog === cuentas[0][0] && passlog === cuentas[3][0]){
        alert("Bienvenido " + cuentas[1][0]);
    }else{
        if(users.length < 2){
            alert("ESTE USUARIO NO ESTA REGISTRADO");
            alert("PRUEBE A REGISTRARSE");
        }else{
            var i = 1;
            while(i < users.length + 1){
                    if(userlog === cuentas[0][i] && passlog === cuentas[3][i]){
                        alert("Bienvenido " + cuentas[1][i] + " " + cuentas[2][i]);
                        break;
                    }else if(userlog != cuentas[0][i] && passlog != cuentas[3][i]){
                        alert("USUARIO O CONTRASEÑA INCORRECTOS");
                        alert("REVISE LA INFORMACION INGRESADA");
                        break;
                    }
                i++;
            }
        }
    }
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: url(gymbg.jpg);
    background-size: cover;
    background-attachment: fixed;
    font-family: monospace;
}

.contenedor-form{
    position: relative;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    max-width: 500px;
    margin:  48px auto;
    color: #fff;
    border-radius:  5px;
}

.contenedor-form .toggle{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 100px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    border-top: 2px solid darkred;
    border-bottom: 2px solid darkred;
    transition: all .5s ease;
    cursor: pointer;
}

.contenedor-form .toggle span {
    letter-spacing: 1px;
}
.contenedor-form .toggle:hover{
    border-top: 2px solid rgb(78, 78, 78);
    border-bottom: 2px solid rgb(78, 78, 78);
}

.contenedor-form h2 {
    margin: 0 0 28px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1px;
}

.contenedor-form input[type="text"],
.contenedor-form input[type="password"],
.contenedor-form input[type="email"]{
    outline: none;
    background: rgba(0, 0,0, .5);
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 2px;
    border-bottom: 4px solid darkred;;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

.contenedor-form input[type="text"]:focus,
.contenedor-form input[type="password"]:focus,
.contenedor-form input[type="email"]:focus{
    border-bottom:  4px solid rgb(78, 78, 78);
}

.contenedor-form button{
    background: darkred;;
    color: #fff;
    border: none;
    width: 100%;
    padding: 10px 0;
    font-weight: normal;
    font-family: monospace;
    letter-spacing: 1px;
    font-size: 16px;
    cursor: pointer;
    transition: all .5s ease;
}

.contenedor-form input[type="submit"]:hover{
    background: rgba(78,78,78,0.7);
}

.contenedor-form .reset-password{
    background: rgba(78,78,78,0.7);
    width: 100%;
    padding: 15px 0;
    text-align: center;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.contenedor-form .reset-password a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.contenedor-form .formulario{
    padding: 40px;
    display: none;
}
 .contenedor-form .formulario:nth-child(2){
     display: block;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styleslogin.css">
    <link rel="icon" type="image/ico" href="../src general/zonalogo.ico"/>
    <title>The Zone GYM</title>
</head>
<body>
    <article class="login">
    <div class="contenedor-form">
        <div class="toggle">
            <span>LOGIN</span> 
        </div>
        <div class="formulario">
            <h2> Registrate </h2>
            <form action="#">
                <input type="text" placeholder="Usuario"  id="user" required>
                <input type="text" placeholder="Nombres"  id="name" required>
                <input type="text" placeholder="Apellidos" id="lname" required >
                <input type="password" placeholder="Contraseña" id="pass" required >
                <button onclick="registro()">Registrarse</button>
            </form>
        </div>
    </br>
            <div class="formulario">
                <h2> Login </h2>
                <form action="#">
                    <input type="text" placeholder="Usuario" id="userlogin" required>
                    <input type="password" placeholder="Contraseña" id="passlogin" required>
                    <button onclick="login()" id="botonlog">Iniciar Sesion</button>
               </form>
            </div>
            <div class="reset-password">
                <a href="#">Olvide mi contraseña</a>
            </div>
    </div>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="jslogin.js"></script>
</article>
</body>
</html>

put

1 respuesta 1

1

Al darle clic en la función se tiene que ejecutar la función. Lo único que tienes que hacer es hacer una función como por ejemplo:

function clearInputs() {
document.querySelector('input').value = '';
}

function login(){
    userlog = document.getElementById('userlogin').value;
    passlog = document.getElementById('passlogin').value;
    if(userlog === cuentas[0][0] && passlog === cuentas[3][0]){
        alert("Bienvenido " + cuentas[1][0]);
    }else{
        if(users.length < 2){
            alert("ESTE USUARIO NO ESTA REGISTRADO");
            alert("PRUEBE A REGISTRARSE");
        }else{
            var i = 1;
            while(i < users.length + 1){
                    if(userlog === cuentas[0][i] && passlog === cuentas[3][i]){
                        alert("Bienvenido " + cuentas[1][i] + " " + cuentas[2][i]);
                        break;
                    }else if(userlog != cuentas[0][i] && passlog != cuentas[3][i]){
                        alert("USUARIO O CONTRASEÑA INCORRECTOS");
                        alert("REVISE LA INFORMACION INGRESADA");
                        break;
                    }
                i++;
            }
        }
    }
 clearInputs();
}

Lo mismo en el registro, simplemente le pones al final que luego de ejecutar eso los deje vacíos, no afectará en nada, sólo en los inputs. Te puede quedar más fácil a entenderlo con los puntos de interrupción o los Debugger, para que veas el proceso exacto que hace tú proyecto. Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.