Form sending only with HTML and / or JS [duplicate]

Question

Form sending only with HTML and / or JS [duplicate]

Navigation

#1 by (2 votes)

0

I need to have the user click the "Send" button automatically to redirect to another page with all the data entered by the user such as: email, password, name, etc. (using "get" method) .

It happens that I tried to do it and only managed to redirect it to the other page, being empty.

Below is 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 a beginner in this area and I've tried to see several tutorials on YouTube but most of them are using HTML together with PHP, JQUERY, JAVA, languages I do not have the slightest knowledge of, I want it to be just using HTML and JS. other questions and has already seemed but I want to ask in this if you have a simpler way to be putting it because as I am beginner did not understand very well with the other questions, but if you have no other simpler way to explain as detailed as possible, I will be very grateful.

javascript html

asked by anonymous 25.01.2017 / 04:05

1 answer

Form does not send data [duplicate] The Rule is not applying to the elements

score 2 · Answer 1

After the redirect, the content of the old page is deleted. You can no longer access any element via JavaScript. That's why your code does not work.

The 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 via JavaScript. And thus, get the data "provided" via GET to your static page.

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

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

On the second page, you should get and process the URL by separating the values. In the English version of this site , I 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 for 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 note. This solution is a bit tricky, because what you want to do is not very usual. I can not even imagine the goal. If you are a beginner and you are learning to program. I recommend taking a look at server-side languages.