Sending form only with HTML and/or JS

Asked

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.

javascript html

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

  • Using HTML and JS, I don’t know if it’s possible with just one of the two.

  • In theory it is not ideal, but it has how to do yes

  • As I am starting now I will only learn other languages later, please show me this method.

1 answer

2

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.

  • The reason is simple, I’m doing computer course for internet and the teacher passed a job so that the user can choose place of the cinema chair, ticket among other things, and I had this idea to appear the information to the user. However these server-side languages, is like java, php ?

  • Is the created function just loose inside the script or does it need to be added somewhere as in "onClick" for example? 'Cause I put it like you said and it still doesn’t show up, showing up the data in the page URL.

Browser other questions tagged javascript html

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