[SOLUCIONADO] Problemas con envío de números (php y AJAX)

edodani · #1 (**permalink**) 26/03/2013, 05:50

Buenas!

Hace poco que programo (unos meses) así que tiro de foros para solucionar las dudas y problemas que me surgen (algún día seré yo el que ayude...).

Hace unos días que estoy batallando con un trozo de código y no le encuentro el fallo. Tengo un input en el que introduzco un número y al darle a un botón me muestra la tabla de multiplicar de dicho número. El caso es que si aprieto el botón me muestra la tabla, pero en lugar del número me pone "undefined", pero si le doy al enter se me abre en una pestaña nueva y me muestra la tabla correctamente.

¿Alguna idea?

Gracias!!

gldelossantos · #2 (**permalink**) 26/03/2013, 05:54

Sin mostrar tu codigo, imposible poder ver el problema.

edodani · #3 (**permalink**) 26/03/2013, 06:05

Perdón!!! Las prisas, los nervios...

El html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>php while</title>
<script type="text/javascript">
function enviar(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("tabla").innerHTML=xmlhttp .responseText;
}
}
var valor = document.getElementsByTagName("i").value;
xmlhttp.open("GET","./php_while.php?i="+valor,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form method="GET" action="php_while.php">
Inserta el número del que quieres que escriba la tabla de multiplicar:
<br/><input type="text" name="i"/>
<br/><button type="button" onclick="enviar()">OK</button>
<div id="tabla"></div>
</form>
</body>
</html>

El php:

<?php
error_reporting(0);
$i = $_GET['i'];
$x = 1;
echo "<table border='2px solid black';>";
while ($x <= 10){
echo '<tr><td>'.$i.'</td><td> X </td><td>'.$x.'</td><td> = </td><td>'.($i*$x).'</td>';
$x++;
}
echo "</table>";
?>

gldelossantos · #4 (**permalink**) 26/03/2013, 06:13

Deberias de utilizar un submit

<input type="submit" onclick="enviar()" value="OK"/>

edodani · #5 (**permalink**) 26/03/2013, 06:20

Al principio lo tenía así, pero no funcionaba. Leí que podría ser por esa razón, por eso lo cambié.
¿Te funciona bien así?

cuasatar · #6 (**permalink**) 26/03/2013, 07:26

Revisa en el dom getelementsbytagName, no se si asi se puedan obtener sus valores,revisa la documentación. Yo suelo usar getElementByID.

En el formulario no se coloca ni metodo ni accion

Valida la entrada para que no te de la tabla de multiplicar "papa*1", "mama*5", etc. Eso te lo dejo de tarea, mira los enlaces:

http://php.net/manual/es/function.isset.php
http://www.php.net/manual/es/function.is-numeric.php
http://www.php.net/manual/es/function.is-float.php

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>php while</title>
<script type="text/javascript">
function enviar(valor)
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("tabla").innerHTML=xmlhttp .responseText;
        }
    }
xmlhttp.open("GET","php_while.php?i="+valor,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
Inserta el número del que quieres que escriba la tabla de multiplicar:
<br/><input type="text" name="i" id="i"/>
<br/><button type="button" onclick="enviar(document.getElementById('i').value)">OK</button>
<div id="tabla"></div>
</form>
</body>
</html>

Código PHP:

  <?php
$i = $_GET['i'];
$x = 1;
echo "<table border='2px solid black';>";
while ($x <= 10){
echo '<tr><td>'.$i.'</td><td> X </td><td>'.$x.'</td><td> = </td><td>'.($i*$x).'</td>';
$x++;
}
echo "</table>";
?>

edodani · #7 (**permalink**) 27/03/2013, 01:49

Solucionado. También me funciona poniendo el script al final (para que cargue toda la página). Eso sí, con getElementsByTagName no, aunque debería...

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>php while</title>
    </head>
    <body>
        <form method="GET" action="php_while.php">
            Inserta el número del que quieres que escriba la tabla de multiplicar:
            <br/><input type="text" name="i" id="i"/>
            <br/><button type="button" onclick="enviar()">OK</button>
            <div id="tabla"></div>
        </form>
        <script type="text/javascript">
        function enviar(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("tabla").innerHTML=xmlhttp.responseText;
                }
            }
            var valor = document.getElementById("i").value;
            xmlhttp.open("GET","./php_while.php?i="+valor,true);
            xmlhttp.send();
            }
        </script>
    </body>
</html>