2

Estou enviando um campo do meu formulário para outra pagina. Nesta pagina preciso que apareça 2 imagens e 2x o campo id que foi recebido . Mas o campo recebido só aparece na primeira imagem. Vcs sabem me dizer onde esta o erro?

Segue o código do form:

<form action="menina.html" name="formul"> 
<input type="text" name="nome">

<br> 
<br> 
<input type="button" value="Menino" onclick="envia('menino.html')"> 

<br>       
<input type="button" value="Menina" onclick="envia('menina.html')">

</form>

<script> 

function envia(pag){ 
       document.formul.action= pag 
       document.formul.submit() 
}

</script>

Este é o código da pagina que está recebendo

<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
/**
* @see http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
    return "";
else
    return results[1];
}
window.onload = function(){
id('nome').innerHTML = gup('nome').replace(/[+]/g,' ');;
}
</script>


<style>
#imagem {
width: 200px;
height 100px;
}

#texto {
position: absolute;
margin-top: -90px;
margin-left: 80px;
}

#imagem1 {
width: 200px;
height 100px;
}
#texto1 {
position: absolute;
margin-top: -60px;
margin-left: 300px;
}

</style>


</head>
<body>

<img id="imagem" src="Body bebe da titia.png"/>
<div id="texto"><p><strong id="nome"></strong></p> </div>

<img id="imagem1" src="Body principe da mamãe.png"/>
<div id="texto"><p><strong id="nome"></strong></p> </div>


</body>
</html>

1 Resposta 1

2

Um id deve ser único na página.

Como você está usando o mesmo id em mais de 1 elemento, o código irá pegar o primeiro id que encontrar.

O que tem que fazer é pegar toda a coleção e fazer um loop. Primeiro sugiro trocar os id="nome" por class="nome".

Em seguida modifique a função function id( el ) para pegar os elementos pela classe:

function id( el ){
   return document.getElementsByClassName( el );
}

E finalmente, no window.onload faça um for para alterar todos os elementos com a classe nome:

window.onload = function(){
   var els = id('nome');
   for(var x=0; x<els.length; x++){
      els[x].innerHTML = gup('nome').replace(/[+]/g,' ');
   }
}

Então o código fica assim:

function id( el ){
   return document.getElementsByClassName( el );
}
/**
* @see http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name )
{
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]"+name+"=([^]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
       return "";
   else
       return results[1];
}

window.onload = function(){
   var els = id('nome');
   for(var x=0; x<els.length; x++){
      els[x].innerHTML = gup('nome').replace(/[+]/g,' ');
   }
}

E o HTML:

<img id="imagem" src="Body bebe da titia.png"/>
<div id="texto"><p><strong class="nome"></strong></p> </div>

<img id="imagem1" src="Body principe da mamãe.png"/>
<div id="texto"><p><strong class="nome"></strong></p> </div>
2
  • Muito obrigado pela explicação. Deu certinho. Abraços
    – Trombin
    Commented 3/03/2018 às 20:44
  • Disponha amigo! Não deixe de marcar ✓ se a resposta foi aceita. Obg!
    – Sam
    Commented 3/03/2018 às 20:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .