Si con hacer las cosa mal te refieres a cometer errores... Nunca pidas perdón por hacer las cosas mal si estás tratando de aprender, si de algo se aprende es de los errores, aquí todos los cometemos.
En primer lugar te recomiendo que no uses document.write()
para hacer debugging, puedes usar otro montón de herramientas o simplemente console.log()
.
Lo que está ocurriendo es que cuando haces document.write()
estás borrando los contenidos de tu documento y por lo tanto el elemento que tratas de seleccionar por medio del selector $('#password')
deja de existir, no está definido, entonces no puede obtener el valor por medio del método .val()
. Puedes ver como esto es cierto porque tus inputs
desaparecen, todo lo que había antes fue remplazado porque implícitamente se llamó a document.open()
que limpia todo el contenido que tenías en tu documento original.
De la documentación:
Nota: dado que document.write escribe directo al hilo (stream) de un
documento, la llamada a document.write en un documento ya cargado
automáticamente ejecuta document.open, lo cual limpiará todo el
contenido del documento en cuestión.
Una solución (la cuál no es la mejor) pero que demuestra mejor lo que te digo, es guardar los valores de usuario y contraseña desde el inicio y luego aplicar el document.write()
, así:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel panel-primary" style="background: #000;">
<div class="panel panel-heading">Entrar como Maestro</div>
<div class="panel panel-body" style="background: #000;">
<label style="color: white;">Usuario</label>
<input type="text" id="usuario" name="usuario" class="form-control input-sm">
<br>
<label style="color: white;">Contraseña</label>
<input type="text" id="password" name="password" class="form-control input-sm">
<br>
<span class="btn btn-primary" id="entrar">Entrar</span>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script>
$(document).ready(function() {
$('#entrar').click(function() {
let usuario = $('#usuario').val();
let pass = $('#password').val();
if (usuario === "") {
alertify.alert("Debe ingresar el Usuario");
return false;
} else if (pass === "") {
alertify.alert("Debe ingresar la Contraseña");
return false;
}
document.write(usuario);
document.write(pass);
string = "usuario=" + usuario + "password=" + pass;
$.ajax({
url: 'connect-login.php',
type: 'POST',
data: string,
success: function(r) {
if (r == 1) {
window.location = "new-class.php";
} else {
alertify.error('Usuario o Contraseña incorrecto');
}
}
});
});
});
</script>
¿Porqué es mejor hacerlo así aunque se borre todo el contenido?
Porque cada vez que llamas $('#usuario').val()
consumes recursos invocando el selector (jQuery) y el método val()
. Esto puedes hacerlo una única vez para guardar en una variable los valores que necesitas y luego acceder a ellos sin tener que llamar a ningúna otra función o recurso adicional. También te da estabilidad porque obtienes como "una fotografía" de los valores antes de que se apliquen los cambios, por eso es que este método funciona aunque se pierda el contenido de tu página... A penas el usuario le da click a tu botón obtiene los valores de la variable en ese preciso momento y guarda dichos datos de ese momento antes de realizar cualquier cambio, por lo tanto, esto te permite por ejemplo hacer el request con ajax
ya que posees de antemano los valores de usuario y contraseña de cuándo el usuario hizo click en tu botón.
Si quieres es ver los valores que tienen los inputs, sin borrar el contenido de la página te recomiendo usar console.log()
, así:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel panel-primary" style="background: #000;">
<div class="panel panel-heading">Entrar como Maestro</div>
<div class="panel panel-body" style="background: #000;">
<label style="color: white;">Usuario</label>
<input type="text" id="usuario" name="usuario" class="form-control input-sm">
<br>
<label style="color: white;">Contraseña</label>
<input type="text" id="password" name="password" class="form-control input-sm">
<br>
<span class="btn btn-primary" id="entrar">Entrar</span>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script>
$(document).ready(function() {
$('#entrar').click(function() {
let usuario = $('#usuario').val();
let pass = $('#password').val();
if (usuario === "") {
alertify.alert("Debe ingresar el Usuario");
return false;
} else if (pass === "") {
alertify.alert("Debe ingresar la Contraseña");
return false;
}
console.log($('#usuario').val());
console.log($('#password').val());
string = "usuario=" + usuario + "password=" + pass;
$.ajax({
url: 'connect-login.php',
type: 'POST',
data: string,
success: function(r) {
if (r == 1) {
window.location = "new-class.php";
} else {
alertify.error('Usuario o Contraseña incorrecto');
}
}
});
});
});
</script>