[SOLUCIONADO] Llevar variables de una pagina a otra en html5

airofued · #1 (**permalink**) 29/07/2014, 11:04

Hola mi nombre es Airo soy nuevo en el foro y también en el mundo de la programación actualmente me encuentro aprendiendo HTML5, justo ahora estaba practicando, aplicando el conocimiento ya adquirido (aunque poco)

mi problema actual es el siguiente:

Quiero llevar datos rellenados de una página a otra.

Por ejemplo:

Tengo los siguientes campos...

Nombre: Juan
Apellido: Rodriguez
País: Perú
Edad: 18

Botón: "Enviar"

Ahora para llevar a esos datos a otra página con la siguiente estructura:

Tu nombre es: Juan
Tu apellido es: Rodriguez
Tu país es: Perú
Tu edad es: 18

Botón: "Volver"

Ya he logrado crear la mayor parte de esto, lo único que no puedo hacer es llevar los datos al otro lado.

Primer Código:

Cita:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>Formulario</title>
<style>
/** Css Simple **/
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
color: blue;
font-weight: bolder;
}

li {
color: red;
list-style: none;
text-align: center;
margin: 15px;
font-weight: bold;
}
h2 {
color: #003399;
}
input#FormularioCentrado{
text-align: center;
}
body {
background-color: #cecece;
}
</style>
<script>
function enviar(formulario){
document.testeum.action=formulario;
document.testeum.submit();
}

</script>
</head>

<body>
<div id="interfaceDoUsuario">

<section class="formulario">
<ul>
<li>
<h2>Formulario</h2>
</li>
<li>
<form name="testeum" action="resultado.html" method="post"></form>
<label for="name">Nome:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on">
</li>
<li>
<label for="apelido">Apelido:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on">
</li>
<li>
<label for="cidade">Cidade:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on">
</li>
<li>
<label for="idade">Idade:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on">
</li>

<li>
<input id="submit" type="button" name="submit" value="Enviar" onclick="enviar('resultado.html')"/>
</form>
</li>
</ul>
</section>

</div>

</body>

</html>

Segundo código:

Cita:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>Formulario</title>
<style>
/** Css Simple **/
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial, sans-serif;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
color: blue;
font-weight: bolder;
}

li {
color: red;
list-style: none;
text-align: center;
margin: 15px;
font-weight: bold;
}
h2 {
color: #003399;
}
input#FormularioCentrado{
text-align: center;
}
body {
background-color: #cecece;
}
</style>
<script>
function enviar(formulario){
document.testeum.action=formulario;
document.testeum.submit();
}
</script>
<title>Resultado</title>
</head>

<body>
<div id="interfaceDoUsuario">

<section class="formulario">
<ul>
<li>
<h2>Resultado</h2>
</li>
<li>
<form name="testeum" action="resultado.html" method="post"></form>
<label for="name">O seu nome é:</label>
<input id="FormularioCentrado" type="text" placeholder="">
</li>
<li>
<label for="apelido">O seu apelido é:</label>
<input id="FormularioCentrado" type="text" placeholder="">
</li>
<li>
<label for="cidade">A sua cidade atual é:</label>
<input id="FormularioCentrado" type="text" placeholder="">
</li>
<li>
<label for="idade">A sua idade é:</label>
<input id="FormularioCentrado" type="text" placeholder="">
</li>

<li>
<input id="submit" type="button" name="submit" value="Voltar" onclick="enviar('Formulario.html')"/>
</form>
</li>
</ul>
</section>

</div>

</body>

</html>

¿Alguien podría ayudarme?

P.D: Incluí los CSS en el mismo HTML debido a que es sólo por prática. Cuando sea algo más en serio sé que debo crear otra .css aparte ya que no ocupa tanto espacio de esa manera.

Gracias.

anrodse · #2 (**permalink**) 29/07/2014, 16:09

En la etiqueta form para iniciar el formulario defines el metodo de envio de las variables. en tu caso tienes method="post", aunque puede ser tambien "get". Esta es la forma de enviar las variables a otra web.

Para recoger las variables en "resultado.html", la web que has puesto, necesitas hacer uso de PHP, o algun otro lenguaje como python, perl... No puedes hacerlo solo con html, asi que busca como hacerlo en algun buscador, que es bastante facil, aunque no puedo explicartelo por aqui.

Encontraras mucha info sobre esto buscando un poquito.

airofued · #3 (**permalink**) 30/07/2014, 02:47

Pensaba que con HTML5 podría lograrlo, ¿qué opinas con algo de JavaScript? ¿Podrá funcionar?

anrodse · #4 (**permalink**) 30/07/2014, 09:27

No se mucho de javascript, y no lo he usado para esto nunca, aunque es muy probable que se pueda.

Lo mejor es que preguntes en el foro de javascript o busques por internet como hacerlo. Supongo que lo dices porque tu servidor no admite php o directamente aun no tienes un servidor, porque en realidad en PHP es bastante facil de hacer.

airofued · #5 (**permalink**) 31/07/2014, 02:32

Logré solucionar el problema de la siguiente forma.

Agregué la siguiente tag al final de input "required"

O sea,

<input class="Formulario" name="Nombre" type="text" placeholder="Escriba su nombre" autocomplete="on" autofocus="autofocus" required>

y cambié el input del botón

Ejem:

<input id="submit" type="button" name="submit" value="Voltar" onclick="enviar('Formulario.html')"/>
</form>

Nuevo:

<input id="submit" type="submit" name="submit" value="Enviar">

Y tuve también que cambiar form por esto:

<form method="post" action="resultado.php" >

El siguiente código html es el que estaba malo:

Cita:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>Formulario</title>
<style>
/** Css Simple **/
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
color: blue;
font-weight: bolder;
}

li {
color: red;
list-style: none;
text-align: center;
margin: 15px;
font-weight: bold;
}
h2 {
color: #003399;
}
input#FormularioCentrado{
text-align: center;
}
body {
background-color: #cecece;
}
</style>
<script>
function enviar(formulario){
document.testeum.action=formulario;
document.testeum.submit();
}

</script>
</head>

<body>
<div id="interfaceDoUsuario">

<section class="formulario">
<ul>
<li>
<h2>Formulario</h2>
</li>
<li>
<form name="testeum" action="resultado.php" method="post">
<label for="name">Nome:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on"required>
</li>
<li>
<label for="apelido">Apelido:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on" required>
</li>
<li>
<label for="cidade">Cidade:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on" required>
</li>
<li>
<label for="idade">Idade:</label>
<input id="FormularioCentrado" type="text" placeholder="" autocomplete="on" required>
</li>

<li>
<input id="submit" type="submit" name="submit" value="Calcular"><br>
</form>
</li>
</ul>
</section>

</div>

</body>

</html>

Este es el nuevo corregido:

Cita:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<title>Calcular</title>
<style>
/** Css Simple **/
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
color: blue;
font-weight: bolder;
}

li {
color: red;
list-style: none;
text-align: center;
margin: 15px;
font-weight: bold;
}
h2 {
color: #003399;
}
input.FormularioCentrado {
text-align: center;
}
body {
background-color: #cecece;
}
</style>
</head>

<body>
<div id="interfaceDoUsuario">

<section class="formulario">
<ul>
<li>
<h2>Calcular</h2>
</li>
<li>
<form method="post" action="resultado.php">
<label for="A">A:</label>
<input class="FormularioCentrado" name="Nombre" type="text" placeholder="Escriba su nombre" autocomplete="on" autofocus="autofocus" required><br>
</li>
<li>
<label for="B">B:</label>
<input class="FormularioCentrado" name="Apellido" type="text" placeholder="Escriba su apellido" autocomplete="on" required><br>
</li>
<li>
<label for="C">C:</label>
<input class="FormularioCentrado" name="Ciudad" type="text" placeholder="Escriba su ciudad" autocomplete="on" required><br>
</li>
<li>
<label for="D">D:</label>
<input class="FormularioCentrado" name="Edad" type="text" placeholder="Escriba su edad" autocomplete="on" required><br>
</li>

<li>
<input id="submit" type="submit" name="submit" value="Resultado"><br>
</form>
</li>
</ul>
</section>

</div>

</body>

</html>

Luego de arreglar mi código HTML tuve que crear un archivo .php con el siguiente código:

Cita:

<?php
if (get_magic_quotes_gpc() === 1) {
$_POST['Nombre'] = stripslashes($_POST['Nombre']);
$_POST['Apellido'] = stripslashes($_POST['Apellido']);
$_POST['Ciudad'] = stripslashes($_POST['Ciudad']);
$_POST['Edad'] = stripslashes($_POST['Edad']);
}
$A = $_POST['Nombre'];
echo '<p>Su nombre es: ' . htmlspecialchars($Nombre) .'</p>';
$B = $_POST['Apellido'];
echo '<p>Su apellido es: ' . htmlspecialchars($Apellido) .'</p>';
$C = $_POST['Ciudad'];
echo '<p>Su ciudad es: ' . htmlspecialchars($Ciudad) .'</p>';
$D = $_POST['D'];
echo '<p>Su edad es: ' . htmlspecialchars($Edad) .'</p>';
?>

Y esa fue la solución.

anrodse · #6 (**permalink**) 01/08/2014, 16:25

Esto código php lo puedes insertar en el mismo html de antes si quieres. Comprueba si han llegado los parámetros por post primer (esto debes hacerlo en cualquier caso) y si han llegado, muestras los resultados, si no, muestras el formulario.

...Tu codigo html hasta body...
<body>
if (isset($_POST['Nombre'])) {
--> Tu codigo PHP
}else{
--> Tu codigo HTML
}
</body>
</html>

webosiris · #7 (**permalink**) 02/08/2014, 02:44

airofued, ya que estás empezando (bienvenido!) lo mejor que puedes hacer es tomarte un tiempo para aprender los conceptos básicos, empezando por los distintos tipos de lenguajes y sus funciones.

CSS es un lenguaje de presentación. Administra el LA FORMA COMO SE VE TU HTML (colores, tamaños, posiciones, etc) pero no tiene nada que ver con variables o con programación.

HTML es un lenguaje de marcas, sirve para indicar QUE TIPO DE CONTENIDO es el que tienes (si es un título, un párrafo, un campo de un formulario, etc) pero tampoco es un lenguaje de programación.

JAVASCRIPT si es un lenguaje de programación del lado del navegador, osea que se ejecuta en cada pc cliente luego de cargar el documento

PHP es un lenguaje de programación del lado del servidor y se ejecuta no en tu pc sino en el servidor, antes de que cargue el documento pedido. Esa es la mejor forma de llevar variables entre páginas

PD: te sugiero no copiar y pegar cosas sin entender que es lo que estás copiando, sino no vas a aprender.

Rafael · #8 (**permalink**) 02/08/2014, 13:12

Cuelo un post que hice hace tiempo:

http://www.forosdelweb.com/f91/hable...guajes-698777/