1

Estou tentando desvendar o mistério, quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo action define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.

Se você digitar alguns caracteres no campo do <form></form>, e clicar no botão Submit, você irá enviar a sua entrada para a página chamada

Por exemplo:

busca.html

Esta página irá mostrar-lhe a entrada recebida.

Veja este exemplo na prática sobre o que quero dizer, e tirem suas conclusões:

<form name="input" action="http://www.google.com/index.html" method="get">

Digite uma palavra para pesquisar: 

<input type="text" name="q">

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

</form>

   

Noutra demonstração, observe que agora, a entrada recebida pelo formulário vai diretamente pra pagina de resultados:

<form name="input" action="http://www.google.com/search" method="get">

Digite uma palavra para pesquisar: 

<input type="text" name="q">

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

</form>

   

Acho que ja deu pra entender ... O que quero, é passar o valor do formulário do index.html pra dentro do formulário busca.html que por sua vez invoca a função Javascript interna, exibindo seus resultados.

Se alguém souber, poste um exemplo prático.

2 Respostas 2

2

HTML é uma linguagem que existe no lado do cliente. Normalmente os dados de formulários são enviados para o servidor onde esses pedidos GET ou POST por exemplo são consumidos/processados.

Enviar um formulário para uma outra página HTML sem passar pelo servidor é anti-pattern, ou seja, raro. Mas se quiseres fazer isso tens de ter em conta que os dados são passados através da URL. E isso só funciona em GET. Se usares POST só no servidor mesmo.

Para usares os dados tens então de ler da url e pode ser algo assim:

function getData(qs) {
    var data = {};
    var pairs = qs.slice(1).split('&');
    pairs.forEach(function(pair) {
        var keyval = pair.split('=');
        data[keyval[0]] = keyval[1];
    });
    return data;
}

E depois no HTML tens de ativamente mudar os valores dos inputs conforme o que leres da query string, o HTML não faz isso sozinho.

Exemplo:

Fiz um exemplo no codepen:

página de procura: (link)
página chamada pela página de procura ao fazer submit: (link)

0

Venho complementar a resposta, pois acredito que mais pessoas procuraram a resposta a essa pergunta em um contexto de um parâmetro URL e Submit.

É comum passar parâmetros para uma página da Web. Para passar parâmetros, você segue a URL com um ponto de interrogação ?, o primeiro parâmetro, um sinal de igual = e o valor do primeiro parâmetro stringObj. Incluir parâmetros seguintes como um "e" comercial &, o parâmetro, um sinal de igual = e o valor do parâmetro stringObj. Você pode, em seguida, recuperar os parâmetros da URL usando o código JavaScript.

Em contrapartida ao exemplo postado por @Sergio, é um código muito pouco provável de ser portável(Cross Browser), por se tratar do foreach();, este não roda no caso de browsers com versão desatualizada e/ou que não suportam o ECMAScript5. Para tanto, fiz a Engenharia reversa ao código de @Sergio, no qual me inspirou.

Elaborei um código minificado, mas é compreensível que nos dá uma visão clara com o qual se possa realizar um método interessante para fazer com que algumas páginas de nosso site somente seja acessíveis se introduz um nome correto.. Vejamos:

Temos que trabalhar com 2 páginas web pelo menos, uma para colocar o formulário e outra que processa e redireciona ao resultado(s).

Copie e Cole o código abaixo, no seu editor de texto preferido e salve com nome de:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Buscador</title>

</head>

<body>

<center>

<form method="GET" action="localizador.html">
 <input type="text" name="q">
 <input type="submit" value="Buscar">
</form> 

</center>

</body>

</html>

Copie e Cole o código abaixo, no seu editor de texto preferido e salve com nome de:

localizador.html

<html>

</head>

<body>

<center>

<input type="hidden" name="q" id="txt"/>

</center>

</body>

<script language="Javascript">

function busca() 
    {
            var url = location.href.split('?'); 
            url = url.pop().slice('2'); 
    for (var i in url){
             document.getElementById('txt').value+=url[i]; 
            }
window.location =  document.getElementById('txt').value + ".html"
}
// Ivocando a função
busca();
</script>

</html>

Ja se pergntou, para que seu site precisa do campo de busca?

Se o usuário não o encontrar no menu ou no mapa do seu site algo que procura, ele terá a chance de encontrá-lo graças ao campo de busca.

Vamos supor que são inúmeras páginas catalogadas, seria tedioso inserir link após link na Home Page sem contar que ficaria poluída visualmente falando.

A única maneira de acessar as páginas seria conhecendo o nome de arquivo e escrever a URL do mesmo.

"É aonde que entra uma caixa de sugestão."

Bom, voltando ... criaremos um formulário muito simples, que incluirá um campo de texto e um botão. No campo de texto teremos que escrever o nome do arquivo que se deseja ver e ao clicar o botão submit será conduzido para a página localizador.html, nesse ponto será processado a entrada recebida, se tiver esse nome de arquivo. Daí, o localizador.html nos conduzirá ao lugar correto e poderemos ver a página oculta.

Mas caso não acertamos com o nome da página escondida. Neste caso, se mostraria uma página de erro típica servidor.

É isso aí pessoal, espero que gostem desta publicação e esclareça as dúvidas que assim como eu tive a curiosidade de desvendar o que ocorre por traz dos motores de busca, em parte é algo relativamente similar.

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 .