Ir para conteúdo
Biel.

[Resolvido] imprimir em php valor javascript

Recommended Posts

Olá pessoal. Direto ao ponto. Abaixo temos uma function. Note que ao clicar no link seu valor mostra e esconde. Até aqui tudo ok.
Estou tentando fazer o seguinte: Quando o link for pressionado, quero imprimir em php o valor de

Nota: Não é para criar button é para clicar no link mesmo. Obrigado ! 

 


<!--<button onClick="func_1()" >botao</button>-->

<a href="link1.php" onClick="func_1()">link1 </a> <br> <br> 
<p id="tete1"></p>

<script>
function func_1() {
	
var a = 300;

var teste = document.getElementById('tete1');
    teste.innerHTML = a; 
	}

document.getElementById('tete1').innerHTML = a;

</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiro que a tag <a> deve ser manipulada para que ela não redirecione de imediato.

A função é quem deve fazer isso.

O que pode fazer é passar essa informação por protocolo GET para o arquivo link1.php

<!--
O nome do evento é "onclick" e não "onClick"
O atributo "href" não é necessário pois é a função quem vai redirecionar
<a href="link1.php" onClick="func_1()">link1 </a> <br> <br>
<p id="tete1"></p> Isso se torna inutilizável aqui pois haverá redirecionamento
-->
<a href="link1.php" onclick="func_1()">link1 </a>

<script>
function func_1(e) {
    /*
    // Caso precise usar o atributo href
    e.preventDefault();
    var link = e.target.href + '?informacao=' + 300;
    */
    var link = 'link1.php?informacao=' + 300;
    window.location.href = link;
  	return (false);
}
</script>

 

Em link1.php

<?php
var_dump($_GET['informacao']);

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Omar, tem como dar um exemplo prático com base no código que postei? Outro detalhe é que não tem apenas um link, mas centenas de links/href

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta assim:

<a href="link1.php" class="link-da-funcao">link1</a>
<a href="link2.php" class="link-da-funcao">link2</a>
<a href="link3.php" class="link-da-funcao">link3</a>

<script>
    var links = document.querySelectorAll('a.link-da-funcao');

    links.forEach(function (e) {
        e.setAttribute('data-link', e.href); // Adiciona o atributo "data" na tag com o valor do atributo "href"
        e.removeAttribute('href'); // Remove o atributo "href" impedirá de redirecionar
        e.addEventListener('click', func_1, false); // Adiciona o evento click na tag
    });

    function func_1(e) {
        // Obtem o link pelo atributo "data" e rediceciona para ele enviando a informação por GET
        window.location.href = (e.target).dataset.link + '?informacao=' + 300;
    }
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Omar, infelizmente o objetivo não foi atingido. Vamos começar do zero. Veja abaixo o que o php está fazendo: Pegando o valor javascript e exibindo na tela o valor. Quero mudar apenas um detalhe: Gostaria que php exibisse na tela o valor javascript somente quando o link receber um click 

 

<h1>esta é a pagina 1 </h1>
<a href="link1.php" onclick="pegarValor()">link1 </a><br> <br> 
<a href="link2.php" onclick="pegarValor()">link2 </a><br> <br> 
<script>
function pegarValor() {
var tete = "700";
return tete;
}
var tete = pegarValor();

</script>

<?php 
$valorJavascript = "<script>document.write(tete)</script>";
$pega = $valorJavascript; 
print $pega;
?>



<h1>esta é a pagina 2 </h1>
<a href="link1.php" onclick="pegarValor()">link1 </a><br> <br> 
<a href="link2.php" onclick="pegarValor()">link2 </a><br> <br> 

<script>
function pegarValor() {
var tete = "700";
return tete;
}
var tete = pegarValor();

</script>

<?php 
$valorJavascript = "<script>document.write(tete)</script>";
$pega = $valorJavascript; 
print $pega;
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

É que você quer meter os pés pelas mãos complicando algo muito simples.

Não precisa se desdobrar para extrair com o PHP alguma informação do javascript porque isso é impossível.

Nem o PHP pode extrair alguma informação do javascript .

Pense da seguinte forma:

1º - PHP (serve-side) processa e renderiza o DOM.

2º - Usuário (user-side) recebe o DOM renderizado pelo (serve-side).

Ou seja quando no javascript (user-side) queremos algo do PHP (serve-side) apenas pedimos que o PHP renderize a informação/conteúdo que queremos.

 

No contexto geral então quando você vai enviar algo de uma página para outra você envia a informação para o (user-side) e se algo precisa ser usado com essa informação ela é re-enviada para o (serve-side).

Lógico que (serve-side) para trabalhar sozinho com os dados e entregar para o (user-side) as informações renderizadas assim como disse antes.

 

Preparei 4 exemplos diferentes aqui para você ver qual a melhor alternativa.

https://drive.google.com/file/d/1nE7cHow4FivW63JEZdGie6GygHXEe_HG/view?usp=sharing

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 24/01/2021 at 16:31, Biel. disse:

Olá pessoal. Direto ao ponto. Abaixo temos uma function. Note que ao clicar no link seu valor mostra e esconde. Até aqui tudo ok.
Estou tentando fazer o seguinte: Quando o link for pressionado, quero imprimir em php o valor de

Nota: Não é para criar button é para clicar no link mesmo. Obrigado ! 

 



<!--<button onClick="func_1()" >botao</button>-->

<a href="link1.php" onClick="func_1()">link1 </a> <br> <br> 
<p id="tete1"></p>

<script>
function func_1() {
	
var a = 300;

var teste = document.getElementById('tete1');
    teste.innerHTML = a; 
	}

document.getElementById('tete1').innerHTML = a;

</script>

 

 

JavaScript não se comunica com PHP, se não por meio de requisição

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • Por Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • Por Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.