Handling of variables in HTML

Asked

Viewed 6,638 times

1

Hello... The world HTLM / JAVASSCRIPT / PHP is totally new to me. As a beginner, I count on your help to develop a small project. Come on...

I have an INDEX.HTML page that receives a value via URL. I was able to read this value using a function called CAPTURPARAMETROURL() that I took on this forum. Now I need to open a page called REGISTER.HTML when the user clicks REGISTRATION passing this value obtained by the function.

Who can help me?

The code of INDEX.HTML is this:

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>MEU SITE</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->

</head>

<body background="images/bg/bg2.jpg">


	<div class="container-meusite">

		<div class="wrap-meusite" >

			<div class="meusite-form-title" style="background-image: url(images/title.png);">
			</div>

                            <div class="container-meusite-form-btn">

                                <div class="container-meusite-form-btn">
				</div>

                            </div>

                                <center><button class="meusite-form-btn">
                                        <a href="cadastro.html?" style="color: #fff"><span>Inscri&ccedil;&atilde;o</span></a>


                                </button>

                                </br>

                            <button class="meusite-form-btn" >
                                <a href="termo.html" style="color: #fff"><span>
                                                    Termos de uso

                                                 </span></a>

                                </button></center>
                    </br>
	</div>
                </div>

<script type="text/javascript" src="js/jquery.js"></script>

<script>

window.onload = CapturaParametrosUrl();

/* Captura parametros da URL com JS*/
function CapturaParametrosUrl() {
var url = window.location.href; //retorna a url da página

var res = url.split('?'); //tenta localizar o ?

if (res[1] !== undefined) {

var parametros = res[1].split('&'); //tenta localizar os & (pode haver mais de 1)

if (parametros[0] !== undefined) {
parametro0 = parametros[0].split('=');
parametro0 = parametro0[1];
var promocional = parametros[0]
document.getElementById('resultado').innerHTML = parametro0;
}

if (parametros[1] !== undefined) {
parametro1 = parametros[1].split('=');
parametro1 = parametro1[1];
document.getElementById('resultado').innerHTML += ', ' + parametro1;
}

if (parametros[2] !== undefined) {
parametro2 = parametros[2].split('=');
parametro2 = parametro2[1];
document.getElementById('resultado').innerHTML += ', ' + parametro2;
}
}
}
</script>
</body>

</html>

javascript html variables url

1 answer

0


You can go concatenating the parameters and then change the href link adding the parameters.

First, remove the ? link, leaving only href="cadastro.html":

<a href="cadastro.html" style="color: #fff"><span>Inscri&ccedil;&atilde;o</span></a>

Then use the changed code below (see explanations in the code):

window.onload = CapturaParametrosUrl();

/* Captura parametros da URL com JS*/
function CapturaParametrosUrl() {
   var url = window.location.href; //retorna a url da página

   var res = url.split('?'); //tenta localizar o ?

   var params = ''; // cria uma variável para os parâmetros

   if (res[1] !== undefined) {

      var parametros = res[1].split('&'); //tenta localizar os & (pode haver mais de 1)

      if (parametros[0] !== undefined) {
         parametro0 = parametros[0].split('=');
         parametro0 = parametro0[1];
         var promocional = parametros[0]
         //document.getElementById('resultado').innerHTML = parametro0;

         params += "?param1="+parametro0; // adiciona o 1º parâmetro
      }

      if (parametros[1] !== undefined) {
         parametro1 = parametros[1].split('=');
         parametro1 = parametro1[1];
         //document.getElementById('resultado').innerHTML += ', ' + parametro1;
         params += "&param2="+parametro1; // adiciona o 2º parâmetro
      }

      if (parametros[2] !== undefined) {
         parametro2 = parametros[2].split('=');
         parametro2 = parametro2[1];
         //document.getElementById('resultado').innerHTML += ', ' + parametro2;
         params += "&param3="+parametro2; // adiciona o 3º parâmetro
      }
   }

   if(params != ""){ // se houve parâmetros, atualizo o href do link com eles
      document.querySelector("a[href='cadastro.html']").href = "cadastro.html"+params;
   }
}

In the above example, I used parameter names like param1, param2 and param3. These names you can change with the ones you want, just change them in the code.

  • You gave it right! You correctly passed the parameter. Now, I think I should open another question topic but it doesn’t hurt to ask: Can I use this same method to take the parameter passed to the CADASTRO.HTML page and insert this value into an INPUT? What would that line look like in this case? Document.querySelector("a[href='cadastro.html']"). href

  • You can use the same function. To include the input you would have to change the selector to document.querySelector("input").value = params... in place of input you would have to put an id or class, or pick up by name etc.

  • Ball show! It all worked out. Thank you very much!

  • Where do I mark this? I’m looking here and I can’t find... Srsrsrsrsrs

  • found! thanks....

Browser other questions tagged javascript html variables url

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