Take Action of the Form and the Submit button.

Question

Take Action of the Form and the Submit button.

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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

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

Por exemplo:

search.html

This page will show you the incoming input.

See this example in practice of 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, notice that the entry received by the form now 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>

displaying your results.

If anyone knows, post a practical example.

javascript html

asked by anonymous 21.05.2016 / 22:09

2 answers

0

I've come to complement the answer, as I believe 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% and% commercial, parameter, an equal sign & , and the value of the = parameter. You can then retrieve 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 stringObj , it does not run in the case of browsers with outdated version and / or that do not support the ECMAScript5. To do so, I made Reverse engineering with the @Sergio code, which inspired me.

I've crafted a mined code, but it's understandable that it gives us a clear view with which to do an interesting method to make some pages of our site only accessible if you enter a correct name ..

We have to work with at least 2 web pages, one to put the form and another to process and redirect to the result (s).

Copy and Paste the code below into your preferred text editor and save it with the name of:

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 into your preferred text editor and save it with the name of:

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

Already pergntou, so that your site needs the search field?

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

Let's assume there are countless pages cataloged, it would be tedious to insert link after link in the Home Page without counting it would look polluted visually speaking.

The only way to access the pages would be to know the file name and write the URL of the file.

"This is where a suggestion box comes in."

Well, coming back ... we'll 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 that we want to see and clicking the foreach(); button will be taken to the submit page, at this point the incoming input will be processed, if it has that filename. Then, localizador.html will lead us to the correct place and we will be able to see the hidden page.

But if we do not hit the hidden page name. In this case, it would show a typical server error page.

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

22.05.2016 / 09:25

Knowing which slide is passing in the bootstrap carousel Create divs based on database entries

score 2 · Accepted Answer

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

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

To use the data then 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 HTML you have to actively change the input values as you read from the query string, HTML does not do this yourself.

Example:

I made an example in codepen:

search page: (link)
page called by search page when submitting: (link)