Form Action (Form’s Action) and Submit (Submit) Button

Asked

Viewed 1,680 times

1

I am trying to unravel the mystery, when the user clicks on the "Submit" button, the content of the form is sent to another file. The attribute action defines the name of the file to which to send the content. The file defined in attribute action usually does something with the incoming input.

If you type some characters in the field of <form></form>, and click the button Submit, you will send your entry to the page called 

Por exemplo:

html search.

This page will show you the received entry.

Take this example in practice on what I mean, and draw your conclusions:

<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>

In another demonstration, note that now, the input received by the form goes directly to the results page:

<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>

I think you can understand ... What I want, is to pass the value of the form index.html into the form busca.html which in turn invokes the javascript function internal, displaying its results.

If anyone knows, post a practical example.

javascript html

2 answers

2


HTML is a client-side language. Usually form data is sent to the server where these requests GET or POST for example are consumed/processed.

Send a form to another page HTML without going through the server is anti-pattern, that is, rare. But if you want to do this you have to take into account that the data is passed through the URL. And that only works on GET. If you use POST only on the same server.

To use the data you have to read from the url and it can be something like this:

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;
}

And then on HTML you must actively change input values as you read from the query string, the HTML doesn’t do it alone.

Example:

I made an example in codepen:

search page: (link)
page called by search page while doing Submit: (link)

0

I am here to supplement the answer because I believe that more people have searched for the answer to this question in a context of a URL and Submit parameter.

It is common to pass parameters to a web page. To pass parameters, you follow the URL with a question mark ?, the first parameter, an equal sign = and the value of the first parameter stringObj. Include following parameters as a commercial "e" &, the parameter, an equal sign = and the value of the parameter stringObj. You can then recover the URL parameters using Javascript code.

In contrast to the example posted by @Sergio, it is a very unlikely code to be portable (Cross Browser), because it is the foreach();, this does not run in the case of browsers with outdated version and/or that do not support Ecmascript5. I did the Reverse engineering to @Sergio’s code, which inspired me.

I wrote a minified code, but it is understandable that it gives us a clear vision with which to carry out an interesting method to make some pages of our site accessible only if you enter a correct name.. Let’s see:

We have to work with 2 web pages at least, one to place the form and another that processes and redirects to the result(s).

Copy and Paste the code below in your preferred text editor and save with:

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>

Copy and Paste the code below in your preferred text editor and save with:

html finder.

<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>

Ever wondered, why your site needs the search field?

If the user does not find it in the menu or on the map of your site something looking for, he will have the chance to find it thanks to the search field.

Let’s assume that are numerous cataloged pages, it would be tedious to insert link after link on Home Page not to mention that I would be visually polluted speaking.

The only way to access the pages would be to know the filename and write the URL of it.

"That’s where a suggestion box comes in."

Well, returning ... we will create a very simple form, which will include a text field and a button. In the text field we will have to write the name of the file you want to see and by clicking the button submit will be driven to the page localizador.html, at that point the incoming entry will be processed if it has that filename. Hence, the localizador.html will lead us to the right place and we can see the hidden page.

But in case we didn’t get the name of the hidden tab. In this case, a typical server error page would be shown.

That’s it folks, I hope you enjoy this publication and clarify the doubts that just as I had the curiosity to unravel what happens behind the search engines, in part it is something relatively similar.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.