Sending form only with HTML and/or JS

Question

Sending form only with HTML and/or JS

Asked 7 years, 10 months ago

Viewed 149 times

0

Guys I need to make sure that when the user clicks on the "Send" button automatically it is redirected to another page with all the data entered by the user as: e-mail, password, name, etc(using "get" method").

It turns out that I tried to do and only manage to redirect to the other page, being the same empty.

Follow my HTML file:

<form action="dados.html" method="post">
		
		<input type="text" id="cNome" name="tNome" size="20" maxlength="20" placeholder="       Digite Seu Nome"/><br><br>
        
		<input type="email" id"cEmail" name="tEmail" size="30" maxlength="30" placeholder="       Digite Seu E-mail"/><br><br>
        
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="date" id="cData" name="tData"/><br><br><br>
        
        Filme:
        <select id="cFilmes">
        	<option >Transformers: O Último Cavaleiro</option>
            <option >Planeta dos Macacos: A Guerra</option>
            <option >Velozes e Furiosos 8</option>
            <option >Alien: Paradise Lost</option>
            <option >Carros 3</option>
            <option >Logan</option>
        </select><br><br><br><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" value="Enviar"/>
		<input type="reset" value="Cancelar"/>

	</form>

Below is the redirect page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dados</title>
<script type="text/javascript">

var nome, email, data, filme;

nome = document.getElementById("cNome").value;
email = document.getElementById("cEmail").value;
data = document.getElementById("cData").value;
filme = document.getElementById("cFilmes").value;

document.write("Obrigado, " +nome+ "\nSegue abaixo seus dados:\nE-mail: " +email+ "\nData de nascimento: \n" +data+ "Filme escolhido: " +filme)


</script>
</head>

<body>

</body>
</html>

I’m beginner in this area and I’ve tried to see several tutorial by youtube but most are using HTML together with PHP, JQUERY, JAVA, languages that I don’t have the minimum knowledge, I want it to be only using HTML and JS.I took a look at other questions and it already has but I want to ask this if there is a simpler way to put it because I’m a beginner did not understand very well with the other questions, but if there’s no other simpler way to explain as detailed as possible, I’d be most grateful.

You want to traffic information from one page to another using javascript only?

– MarceloBoni

2017/01/25 at 03:35
Using HTML and JS, I don’t know if it’s possible with just one of the two.

– Lone Tonberry

2017/01/25 at 03:36
In theory it is not ideal, but it has how to do yes

– MarceloBoni

2017/01/25 at 03:38
As I am starting now I will only learn other languages later, please show me this method.

– Lone Tonberry

2017/01/25 at 03:39

1 answer

Browser other questions tagged javascript html

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

by mau humor • **1,991** points · Answer 1 · 2017-01-25T03:45:00+00:00

After redirecting, the contents of the old page are deleted. You can no longer access any element via Javascript. That’s why your code doesn’t work.

Values sent through forms using the POST, GET... methods are intended for the part of the application that is running on the server side, so they are not visible (directly) on another HTML page.

However, after submitting the form (redirect), you can access the full URL through Javascript. And that way, get the "provided" data via GET to your static page.

To do this, you must first change the form method to GET. According to code below:

...
<form action="dados.html" method="get">
...

On the second page, you should retrieve and process the URL by separating the values. In English version of this site, found a function implemented for this purpose:

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

So the code on your second page should look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Dados</title>
        <script type="text/javascript">


   function getParameterByName(name, url) {
        if (!url) {
          url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }



    var nome, email, data, filme;

    nome = getParameterByName("cNome");
    email =  getParameterByName("cEmail");
    data =  getParameterByName("cData");
    filme =  getParameterByName("cFilmes");

    document.write("Obrigado, " +nome+ "\nSegue abaixo seus dados:\nE-mail: " +email+ "\nData de nascimento: \n" +data+ "Filme escolhido: " +filme)


    </script>
    </head>

    <body>

    </body>
    </html>

Just one more observation. This solution is a bit tricky, because what you want to do is not very usual. I can’t even imagine the goal. If you are a beginner and are learning to code. I recommend taking a look at the server-side languages.