Script para capturar lo que el usuario escribe en un campo

**Ramses012** · 27-09-2020

Que tal amigos, eh estado probando diferentes ideas seguí diferentes tutoriales sobre la función keypress, pero aun estoy al 50% de mi idea, el objetivo de mi ejercicio es el siguiente:

1, capturar lo que el usuario escribe en el campo nombre, SIN que pulse en el botón enviar, intente también en el evento change, pero no tuve éxito, hasta ahora el que más se acerca al objetivo es keypress.

2, una vez logrado capturar la información del input nombre, requiero almacenar esas tecla capturadas, en una base de datos de MySQL, el reto acá, vuelvo a reiterarlo es capturar la información en la base de datos, sin que el usuario pulse en el botón "Enviar", es un formulario breve, que de hecho estaba pensando, como probablemente se almacene bastante información, no sé que me recomienden si guardar la información de una manera tradicional o darle algún formato en especial, JSON por ejemplo, acá mi código:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>Ejercicio Practico Formulario </title>
</head>
<body>

<form method="post" >
<div class="form-row">
<div class="form-group col-md-6">

<div class="input-group-lg">
<!-- aca añadi dentro del input la funcion onkeypress-->
<input type="text" id="nOpinion" onkeypress="myFunction()" class="form-control my-3" placeholder="Tu nombre" name="nombre_user" required>

<input type="email" id="nEmail" class="form-control my-3" placeholder="Tu email" name="correo_user" required>
</div>

<div class="form-group">
<label for="inputAddress">Direccion</label>
<input type="text" class="form-control" id="inputAddress" name="direccion" placeholder="Inserta tu direccion">
</div>
<div class="form-group row">
<label for="example-tel-input" class="col-2 col-form-label">Telefono</label>
<div class="col-10">
<input class="form-control" type="tel" name="telefono" id="example-tel-input">
</div>
</div>
<div class="form-group">
<label for="inputAddress2">Referencias de lugar donde radica</label>
<input type="text" class="form-control" id="inputAddress2" name="referencias" placeholder="Casa,Departament,Oficina">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">Ciudad</label>
<input type="text" class="form-control" name="ciudad" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">Nacionalidad</label>
<select id="inputState" class="form-control">
<option selected>Mexicano.</option>
<option> Argentina.</option>
<option> Brasil.</option>
<option> Española.</option>
<option> Colombiana.</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Codigo Postal</label>
<input type="text" class="form-control" name="cp" id="inputZip">
</div>
</div>
<div class="form-group">

<div class="form-group">
<label for="exampleTextarea">Escriba su Opinion</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>

<script>
document.getElementById("nOpinion").onkeypress = function (){myFunction()};

function myFunction(){
/* si me detecta la funcion pero no logro imprimirlo o embeberlo en el div que esta debajo */
alert("tecla pulsada en el campo nombre");
}
</script>

</head>
<body>
<h1>Información del teclado</h1>
<p>Pulsa una tecla y te daré la información sobre la misma.</p>
<div id="respuesta"><div>
</body>

</body>
</html>

**3dpoder** · 12-04-2023

Para capturar lo que el usuario escribe en el campo "nombre" sin pulsar el botón "enviar", puedes usar el evento "input" en lugar de "keypress" o "change". Además, para almacenar la información en una base de datos sin pulsar el botón "enviar", puedes hacer una llamada AJAX para enviar los datos a un script de PHP que se encargue de la inserción en la base de datos. Aquí te dejo un ejemplo de cómo hacerlo:

Código HTML con python instalado:

Código:

<input type="text" id="nombre" class="form-control" placeholder="Tu nombre" required>

Código JavaScript:

Código:

const nombreInput = document.getElementById('nombre');
nombreInput.addEventListener('input', () => {
  const nombre = nombreInput.value;
  // Hacer una llamada AJAX para enviar los datos a un script de PHP
  const xhr = new XMLHttpRequest();
  const url = 'guardar_datos.php';
  const params = `nombre=${nombre}`;
  xhr.open('POST', url);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(params);
});

Código PHP (guardar_datos.php):

Código:

<?php
// Conectar a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";

$conn = new mysqli($servername, $username, $password, $dbname);

// Verificar la conexión
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// Obtener los datos enviados por AJAX
$nombre = $_POST['nombre'];

// Insertar los datos en la base de datos
$sql = "INSERT INTO tabla (nombre) VALUES ('$nombre')";

if ($conn->query($sql) === TRUE) {
  echo "Datos insertados correctamente";
} else {
  echo "Error al insertar datos: " . $conn->error;
}

// Cerrar la conexión
$conn->close();
?>

Ten en cuenta que debes modificar el código PHP para que se ajuste a tu base de datos y tabla específicas. Además, es importante que valides y escapees los datos que recibes del usuario para evitar ataques de inyección SQL.

Tema: Script para capturar lo que el usuario escribe en un campo

Herramientas

Buscar tema

Script para capturar lo que el usuario escribe en un campo

Temas similares

Problemas para capturar con mi videocamara analogica en Premiere 6

Guía para capturar texturas PBR

Shup 0 27-utilidad para capturar imágenes y publicarlas

Escribe un guion historia para un solo personaje en 100 palabras

Programa para capturar en avi la pantalla