Enviar formulario solo con escribir en el

rodrypaladin · #1 (**permalink**) 22/10/2014, 06:49

Buenas foro vecino ;)

Actualmente tengo un formulario en php el cual dependiendo lo que hay en un textarea, al darle al botón submit, aparece un resultado u otro. Lo que me gustaría realizar es que cada vaya apareciendo el resultado a medida que voy escribiendo en el textarea, pero resulta que no tengo ni idea de javascript ¿ Como habría que realizarlo??

Un saludo y gracias.

garciasanchezdani · #2 (**permalink**) 22/10/2014, 07:14

Hola @rodrypaladin , puedes utilizar el evento .keyup() de jQuery, el cual cuando terminas de editar el textarea, captura la acción, y ya con Javascript muestras el resultado.
Mira un ejemplo práctico aquí: http://jsfiddle.net/YUtYu/238/

Saludos :)

rodrypaladin · #3 (**permalink**) 22/10/2014, 07:49

Pero tendría que volver a programar las formas en que cojo y opero los datos del textarea en javascript ? la cuestión es que lot engo todo hecho en php, muestro los resultados, los cojo, opero con ellos... solamente quiero que dichos resultados en php los muestre como he mencionado, cada vez que modifique el textarea se vayan modificando los resultados ( es decir, volviendo a enviar el formulario )

IsaBelM · #4 (**permalink**) 22/10/2014, 07:52

te dejo un ejemplo de autocomplete para que te hagas una idea.
básicamente se trata de asignale el evento onkeyup al textarea para invocar una función que haga una petición ajax al archivo .php

rodrypaladin · #5 (**permalink**) 22/10/2014, 08:44

IsaBelM gracias pero me da que hay demasiado código para lo que necesito y no consigo localizar lo que realmente necesito para añadirlo únicamente a mi textarea. Soy novato 100% en javascript no entiendo nada xd, solo se que tengo que añadir la funcion en un script, y añadirle al textarea la id y llamar a la funcion para ejecutarla en el textarea pero no consigo encontrar que es lo que tengo que añadir.

IsaBelM · #6 (**permalink**) 22/10/2014, 12:28

te lo resumo

Cita:

rodrypaladin · #7 (**permalink**) 22/10/2014, 12:50

Si aunque me des el código la cuestión es que no se como implementarlo:

Este es mi textarea:

Código HTML:

Ver original<textarea style="resize: vertical;"class="form-control" id="output" name="texto" placeholder="Pega aquí las palabras que quieras contar" cols="30" rows="15"><?php if(isset($_POST['enviar'])) { echo $array_a_string; } ?></textarea>

Y este mi botón submit:

Código HTML:

Ver original<button type="submit" name="enviar" class="btn btn-primary" >Contar palabras y caracteres</button>

¿ Que tendría que poner donde quiero que muestre los resultados ? que obtengo por medio de php ?

IsaBelM · #8 (**permalink**) 22/10/2014, 13:51

inicio.php

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script type="text/javascript">
var clase = (function() {

var ajax = new XMLHttpRequest();

function autoCompletaPulsacion(elTxtBox) {

var str = elTxtBox.value;

if (str.length <= 2) { // si el valor es menor a 3

return;
}

var uri = elTxtBox.parentNode.getAttribute('action') + '?busca=' + str;

ajax.open('GET', uri, true); // en este caso has de recorgelo la variable "busca" con $_GET[]. aunque se puede enviar por POST o PUT

ajax.onreadystatechange = function() {

if (!ajax || ajax == null) { return; }

if (ajax.readyState == 4) {

if (ajax.status == 200) {

document.getElementById('respuesta').innerHTML = ajax.responseText; // aquí imprimes la respuesta

ajax.onreadystatechange = function(){};
//ajax.abort();
//ajax = null;

}
}
}

ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return;

}

window.onload = function() {
document.getElementById('output').addEventListener ('keyup', function() {autoCompletaPulsacion(this)}, false); // asignamos el evento al textarea
}

})();
</script>
</head>
<body>

<form action="pagina.php" method="post">
<textarea style="resize: vertical;"class="form-control" id="output" name="texto" placeholder="Pega aquí las palabras que quieras contar" cols="30" rows="15"><?php if(isset($_POST['enviar'])) { echo $array_a_string; } ?></textarea>
<button type="submit" name="enviar" class="btn btn-primary" >Contar palabras y caracteres</button>

</form>

<div id="respuesta"></div>
</body>
</html>

pongamos que el acction de tu form es pagina.php. con este código harás peticiones a pagina.php y esta retornará una respuesta

pagina.php

Cita:

<?php
echo $_GET['busca'];
?>

en este caso la respuesta será lo que escribas en el textarea. este respuesta se imprimirá en el bloque #respuesta de inicio.php