Can't get values from input with Javascript

Question

I had read some other articles trying to solve this problem but I still have the same problem: I can't obtain values from inputs. After I click the "Crear Cuenta" button it gives me 'undefined'. I expect to pass these values from inputs to a javascript file and then do some other stuff.

function registrar() {
  let nombre = document.getElementsByName("nombre").value;
  let apellido = document.getElementsByName("apellido").value;
  let username = document.getElementsByName("username").value;
  let email = document.getElementsByName("email").value;
  let password = document.getElementsByName("password").value;
  let confirmPassword = document.getElementsByName("confirmPassowrd").value;

  console.log("Pass: " + password);
  console.log("Confirm: " + confirmPassword);

  if (password != confirmPassword) {
    alert("Contraseñas No coinciden");
  }

  var usuario = [];
  usuario["nombre"] = nombre;
  usuario["apellido"] = apellido;
  usuario["username"] = username;
  usuario["email"] = email;
  usuario["password"] = password;

  console.log(usuario);
}

<section id="registrarse" class="registrarse">
  <form class="registrarse__container" id="registro__form" type="POST" onsubmit="registrar()">
    <h2 class="title">Registrarse</h2>
    <article class="itemA">
      <label class="itemA1">Nombre</label>
      <input class="itemA2" type="text" name="nombre" required>
      <span class="itemA3">Ingrese su Nombre</span>
    </article>
    <article class="itemB">
      <label class="itemB1">Apellido</label>
      <input class="itemB2" type="text" name="apellido" required>
      <span class="itemB3">Ingrese su Apellido</span>
    </article>
    <article class="itemC">
      <label class="itemC1">Nombre de Usuario</label>
      <input class="itemC2" type="text" name="username" required>
      <span class="itemC3">Ingrese su Usuario</span>
    </article>
    <article class="itemD">
      <label class="itemD1">Correo Electronico</label>
      <input class="itemD2" type="email" name="email" required>
      <span class="itemD3">Ingrese su correo</span>
    </article>
    <article class="itemE">
      <label class="itemE1">Contraseña</label>
      <input class="itemE2" type="password" name="password" id="logup__password" required>
      <span class="itemE3">Ingrese Contraseña</span>
    </article>
    <article class="itemF">
      <label class="itemF1">Confirmar Contraseña</label>
      <input class="itemF2" type="password" name="confirmPassword" id="logup__confirm-password" required>
      <span class="itemF3">Ingrese Nuevamente Contraseña</span>
    </article>
    <article class="itemG">
      <button class="itemG3" type="submit">Crear cuenta
        <i class="element1"></i>
      </button>
      <button class="itemG4" onclick="location.href='#body'">Cancelar
        <i class="element2"></i>
      </button>
    </article>
    <article class="redireccion-registro">
      <label>¿Ya tienes una cuenta?</label>
      <a href="#login" class="redireccion-registro">Conectate</a>
    </article>
  </form>
</section>

getElementsByName returns array instead of single element,so need to use let nombre = document.getElementsByName("nombre")[0].value; — flyingfox
– flyingfox, Commented Oct 5, 2022 at 4:23

flyingfox · Accepted Answer · 2022-10-05 04:43:29Z

Two point need to pay attention:

getElementsByName returns array instead of single element,so need to use let nombre = document.getElementsByName("nombre")[0].value
Using confirmPassword instead of confirmPassowrd to get value(it's a typo)

<!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">
    <title>Document</title>
</head>
<body>

    <section id="registrarse" class="registrarse">
        <form class="registrarse__container" id="registro__form" type="POST" onsubmit="registrar()">
            <h2 class="title">Registrarse</h2>
            <article class="itemA">
                <label class="itemA1">Nombre</label>
                <input class="itemA2" type="text" name="nombre" required>
                <span class="itemA3">Ingrese su Nombre</span>
            </article>
            <article class="itemB">
                <label class="itemB1">Apellido</label>
                <input class="itemB2" type="text" name="apellido" required>
                <span class="itemB3">Ingrese su Apellido</span>
            </article>
            <article class="itemC">
                <label class="itemC1">Nombre de Usuario</label>
                <input class="itemC2" type="text" name="username" required>
                <span class="itemC3">Ingrese su Usuario</span>
            </article>
            <article class="itemD">
                <label class="itemD1">Correo Electronico</label>
                <input class="itemD2" type="email" name="email" required>
                <span class="itemD3">Ingrese su correo</span>
            </article>
            <article class="itemE">
                <label class="itemE1">Contraseña</label>
                <input class="itemE2" type="password" name="password" id="logup__password" required>
                <span class="itemE3">Ingrese Contraseña</span>
            </article>
            <article class="itemF">
                <label class="itemF1">Confirmar Contraseña</label>
                <input class="itemF2" type="password" name="confirmPassword" id="logup__confirm-password" required>
                <span class="itemF3">Ingrese Nuevamente Contraseña</span>
            </article>
            <article class="itemG">
                <button class="itemG3" type="submit">Crear cuenta<i class="element1"></i></button>
                <button class="itemG4" onclick="location.href='#body'">Cancelar<i class="element2"></i></button>
            </article>
            <article class="redireccion-registro">
                <label>¿Ya tienes una cuenta?</label><a href="#login" class="redireccion-registro">Conectate</a>
            </article>
        </form>
    </section>

    <script>
        function registrar(){

            let nombre = document.getElementsByName("nombre")[0].value;
            let apellido = document.getElementsByName("apellido")[0].value;
            let username = document.getElementsByName("username")[0].value;
            let email = document.getElementsByName("email")[0].value;
            let password = document.getElementsByName("password")[0].value;
            let confirmPassword = document.getElementsByName("confirmPassword")[0].value;

            console.log("Pass: " + password);
            console.log("Confirm: " + confirmPassword);

            if(password != confirmPassword){
                alert("Contraseñas No coinciden");
            }
 
            var usuario = {};
            usuario['nombre'] = nombre
            usuario['apellido'] = apellido;
            usuario['username'] = username;
            usuario['email'] = email;
            usuario['password'] = password;

            console.log(usuario);
        }
    </script>



</body>
</html>

Collectives™ on Stack Overflow

Can't get values from input with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related