6

Criei um formulário simples. Nele eu coloquei:

<form action="02.html" method="get" name="meu_formulario">
<input type="text" name="nome" size="60" maxlength="40"/>
</form>

Eu quero criar o 02.html que receba esse dado do formulário e exiba na tela o dado preenchido, só isso. Mas eu não posso usar PHP, tem que ser HTML puro. Como eu faço isso? É possível fazer isso?

3
  • 1
    Talvez usando javascript, mas n sei se é possivel sem uma linguagem server-side.
    – user28595
    Commented 14/01/2016 às 16:54
  • Pode usar HTML 5 @DiegoFelipe.
    – durtto
    Commented 14/01/2016 às 17:32
  • @Adriano, já que não pode usar uma tecnologia server-side, você pode fazer uma app offline para o chrome e para armazenar os dados, use um IndexedDB Commented 14/01/2016 às 19:38

4 Respostas 4

9

Poderia fazer com javascript, mas o parâmetro seria quebrado de acordo com os caracteres contidos nele pois por URL ele passará a string, mas formatará em link, retirando espaços e acentos:

01.html

<form action="02.html" method="get">
    <input type="text" name="nome" size="60" maxlength="40"/>
</form>

02.html

<script> //se enviar "Stack Over" ele receberia "Stack+Over"
    var url   = window.location.search.replace("?", "");
    var itens = url.split("&");
    var valor = itens[0].slice(5); // 5 pois nome= tem 5 caracteres
    alert(valor);
</script>

Uma forma mais sofisticada que encontrei em Como faço para ler valores da URL em Javascript (QueryString)?, nele os erros que citei acima são tratados (exceto de acento), e para pegar valores seriam como em php:

<script>
    // parametro `a` opcional, ex: `tipo=1&nome=espada#custo=0`
// o valor padrão é da URL atual
function GetQueryString(a)
{
    a = a || window.location.search.substr(1).split('&').concat(window.location.hash.substr(1).split("&"));

    if (typeof a === "string")
        a = a.split("#").join("&").split("&");

    // se não há valores, retorna um objeto vazio
    if (!a) return {};

    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        // obtem array com chave/valor
        var p = a[i].split('=');

        // se não houver valor, ignora o parametro
        if (p.length != 2) continue;

        // adiciona a propriedade chave ao objeto de retorno
        // com o valor decodificado, substituindo `+` por ` `
        // para aceitar URLs codificadas com `+` ao invés de `%20`
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    // retorna o objeto criado
    return b;
}

// uso
var qs = GetQueryString();
alert(qs['nome']);
</script>
5

Somente com HTML não é possível. Se usar GET, é possível com HTML + JavaScript, como mostrado em outras respostas. Para usar POST, você precisa de uma linguagem que execute no servidor.

1
  • É aí que entra o maravilhoso PHP Commented 15/01/2016 às 11:22
3

É possível enviar e receber parâmetros sem o uso de recursos server-side (php, asp, ruby, etc)

Há a forma tradicional pelo método GET onde basta ler a URI e extrair os parâmetros com JavaScript. Outra forma é usando cookies.

Extraindo dados da URI com JavaScript

Exemplo prático:

Suponha que essa página seja tmp.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

/* 
Função usada para decodificar dados de uma URI. 
Créditos e fonte oficial: http://phpjs.org/functions/urldecode/
*/
function urldecode(str) {
  return decodeURIComponent((str + '')
    .replace(/%(?![\da-f]{2})/gi, function() {
      // PHP tolerates poorly formed escape sequences
      return '%25';
    })
    .replace(/\+/g, '%20'));
}

/*
Função que extrai parâmetros de uma URI
*/
function GetURLParameters(){
    var sstr = window.location.search.substring(1);
    var arr = sstr.split('&');
    if (arr.length < 1 || arr[0] == "")
        return null;

    var rs = new Array();
    for (var i = 0; i < arr.length; i++){
        var KeyValuePair = arr[i].split('=');
        rs[KeyValuePair[0]] = urldecode(KeyValuePair[1]);
    }
    return rs;
}

p = GetURLParameters();
</script>
</head>
<body>

<form action="tmp.html" method="GET">
<input type="text" size="10" value="" name="foo" id="foo" />
</form>

<script type="text/javascript">
p = GetURLParameters();
if (p)
    for (k in p) 
        if (document.getElementById(k) !== null)
            document.getElementById(k).value = p[k];
</script>

</body>
</html>

Obtendo dados de cookies

Outra forma, é usando cookies, também com JavaScript.

Exemplo, simulando envio pelo método POST:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function createCookie(name, value, days) {
    var date, expires;
    if (days) {
        date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}
function getCookieData(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}
function setObj(eln){
    var rr = false;
    if( document.all ){
        if(  document.all[eln]  ){
        rr = document.all[eln];
        }
    }else{
        if(  document[eln]  ){
        rr = document[eln]; 
        }else{
            if(  document.getElementById(eln)  ){
            rr = document.getElementById(eln );
            }
        }
    }
    return rr;
}

function GetURLParameters(){
    var sstr = getCookieData("frm1");
    if (!sstr)
        return null;
    var arr = sstr.split('&');
    if (arr.length < 1 || arr[0] == "")
        return null;

    var rs = new Array();
    for (var i = 0; i < arr.length; i++){
        var KeyValuePair = arr[i].split('=');
        rs[KeyValuePair[0]] = decodeURI(KeyValuePair[1]);
    }
    return rs;
}

//p = getCookieData("frm1");
p = GetURLParameters();
console.log(p);
</script>
</head>
<body>

<form id="frm1" name="frm1" action="cookies.html" method="POST">
<input type="text" size="10" value="" name="foo" id="foo" /><br />
<input type="text" size="10" value="" name="bar" id="bar" />
<input type="submit" value="enviar" />
</form>

<script type="text/javascript">

p = GetURLParameters();
if (p)
    for (k in p) 
        if (document.getElementById(k) !== null)
            document.getElementById(k).value = p[k];

createCookie("frm1", "", -1);

var obj = setObj("frm1");
obj.addEventListener("submit", function() {
    var e = obj.elements;
    var d = new Array();
    for(i=0; i < e.length; i++){
        t = e[i].type;
        if(t != "submit")
            d[i] = e[i].name+"="+encodeURI(e[i].value);
    }
    var data = d.join("&");
    alert(data);
    createCookie("frm1", data, 1);
});

</script>

</body>
</html>

obs: Os exemplos não utilizam códigos crossbrowser. O recomendado é utilizar um framework como JQuery.

1

se for somente um formulário simples, e você quiser apenas adicionar os dados dele a localStorage, você pode remover a tag e fazer com que um botão ao final do formulário execute uma função em JavaScript que adicione os dados a Storage

por exemplo

<label for="nome">Nome:</label>
<input type="text" id="nome" value="Seu Nome">

para a pessoa digitar o nome num campo de texto

<button type="button" onclick="SendForm()">Enviar sua Mensagem</button>

para criar um botão que chama a função SendForm()

para que funcione você tem que linkar o arquivo JS

para isso use <script defer src="./arquivo.js"></script>

no JS defina a função SendForm()

function SendForm() {
    var nome = document.getElementById("nome");

    var dados = JSON.parse(localStorage.getItem("dadosForm"));

    if (dados === null) {
        localStorage.setItem("dadosForm", "[]");
        dados = [];
    }

    var auxRegistro = {
        nome: nome.value,
    };
    dados.push(auxRegistro);
    localStorage.setItem("dadosForm", JSON.stringify(dados));

    alert('nome adicionado a localStorage');
    nome.value = "";
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .