5

A janela pai (jsp) tem um botão para abrir o popup (filho).

<input type="button" onclick="test();" value="Call Child Window" /> 

Quando abre o popup, há campos de texto para a pessoa digitar uma palavra. Esses input são criados dinamicamente, com um botão e uma função para criar mais input. Os valores digitados nos input são armazenados em um array e o qtdeCampos é a quantidade de campos. A função dos botões:

<script type="text/javascript">
var qtdeCampos = 0;
function addCampos() {
   var objPai = document.getElementById("campoPai");
   var objFilho = document.createElement("div");//Criando o elemento DIV;
   objFilho.setAttribute("id","filho"+qtdeCampos);//Definindo atributos ao objFilho
   objPai.appendChild(objFilho);//Inserindo o elemento no pai
   //Escrevendo algo no filho recém-criado:
   document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='ctxt"+qtdeCampos+"' name='campo[]'>\n\<input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
   qtdeCampos++;
}    
</script>

Gostaria de saber como passar esse array de palavras digitadas no popup para a página pai. A página pai o receberá em um array.

7
  • 1
    Precisas mesmo de abrir uma nova janela? não seria melhor com um dialog?
    – Sergio
    6/05/2016 às 14:32
  • @Sergio acredito que sim, pois podem ser várias inserções de palavras! Há uma função no popup que permiti abrir vários campos de text. 6/05/2016 às 14:36
  • No popup existe um input texto que o cliente irá digitar algo. Você quer pegar esse valor e enviar para o jsp que o chamou. Para aonde exatamente você quer enviar? Para uma div q existe no jsp pai? Para outro input?
    – Matheus
    6/05/2016 às 16:36
  • @Matheus para uma div que existe no JSP pai. 6/05/2016 às 17:33
  • 1
    @Pacíficão, todas as respostas já respondem sua pergunta Como passar dados do popup para a página pai, o que você precisa agora é entender as respostas. Em todas as respostas o valor do popup foi salvo em algum lugar da página pai, agora o que você precisa é saber como manipular esse valor na página pai, acho que você precisa de outra pergunta ou apenas olhar mais atento as respostas que já foram dadas a você. 11/05/2016 às 12:49

3 Respostas 3

5
+50

Supondo que você tenha esses inputs no popup:

<input type="text" id="email" name="email" class="form-control">    
<input type="text" id="senha" name="senha" class="form-control">    
<button class="btn btn-success" onclick="enviaDados()">Envia Dados</button>

Ao clicar no botão Envia Dados, será chamado a função definida no onclick, sendo ela enviaDados(), onde a função irá pegar os valores do input e colocar na div que você definiu no jsp pai.

<script>
  function enviaDados(){
    var email = $("#email").val();
    var senha = $("#senha").val();

    //insere os valores nas div pai pelo id da div que você definir.
    $("#div1").text(email);
    $("#div2").text(senha);
  }
</script>

Para essa solução, foi utilizado JavaScript e Jquery.

Edit

Complementando a resposta após a alteração da pergunta.

Na nova função, o jquery irá percorrer todos os inputs com o id ctxt, pegando o valor de cada input e inserindo na div com o id "idPai".

function enviaDados(){
    $("#idPai").html(""); // Aqui irá resetar o conteudo da div.
    $('input[id^="ctxt"]').each(function(){
        $("#idPai").append("<p><b> Valor do Imput: "+$(this).val()+"</b></p>");
    });  
}

Exemplo: https://jsfiddle.net/p0L2g7wp/1/

9
  • Como eu receberia esses valores na minha página pai? 9/05/2016 às 19:47
  • @Pacíficão Ele pega os valores das variaveis email e senha, e joga numa div q tu definio na pagina pai
    – Matheus
    9/05/2016 às 20:50
  • Ainda não entendi como será o código na página pai. Além do que, atualizei a pergunta, pois tenho um vetor com as respostas. 10/05/2016 às 18:29
  • 1
    @Pacíficão Em uma div eh muito vago, pq olha soh, eu vou jogar só o texto dentro dessa div? Não né. Então defina mais, exemplo: Quero os dados dos input dentro de uma div com o id="pai", onde cada valor do input deve ser inserido dentro de uma tag <p>.
    – Matheus
    10/05/2016 às 20:20
  • 1
    @Pacíficão Conseguiu resolver o problema?
    – Matheus
    12/05/2016 às 14:09
5

Da pra fazer com HTML puro. Basta configurar o atributo target como _parent no seu formulário:

<form target="_parent"></form>

Dessa forma o formulário será submetido na janela pai, ou seja, a janela por meio da qual você abriu o pop-up.

4

Utilize a propriedade window.opener.document para manipular qualquer elemento na página pai.

var $botaoFechar = document.getElementById('botaoFechar');
$botaoFechar.addEventListener('click', function () {
    //Elemento na página chamadora que será adicionado o valor da filho
    var $meuTextBoxPai = window.opener.document.getElementById('Ptxt');
    //Elemento do popup com os dados a serem transferidos
    var $meuTextBoxFilho = document.getElementById('ctxt');

    $meuTextBoxPai.value = $meuTextBoxFilho.value;
    $meuTextBoxPai.focus();
    window.close();
});

Explicando o exemplo:

  • Adicionei um evento click para o elemento com id meuBotao
  • Busco um elemento com id meuTextBox (você pode manipular qualquer elemento) da página chamadora (pai)
  • Atribuo a esse elemento o valor que eu desejar
  • Em seguida atribuo o foco a ele
  • E por fim, fecho o popup
5
  • OK, esse é código que estaria no meu popup. Mas como fica a página pai?? 10/05/2016 às 18:57
  • 1
    O que você quer fazer na página pai? Te dei um exemplo de como fazer para enviar um dado qualquer do seu popup para qualquer lugar da tua página chamadora. Agora você decide para onde enviar essa informação e o que fazer com ela. Simples assim. 10/05/2016 às 19:00
  • O problema que é um array que quero passar para a página pai. Funciona da mesma maneira?? E sobre o que fazer na página pai, preciso colocar em um vetor. 10/05/2016 às 19:03
  • 1
    @Pacíficão, editei a pergunta usando os campos com o mesmo nome que você usou na outra pergunta. Procure não repetir a mesma pergunta, você pode editar sua pergunta quantas vezes for necessário para disponibilizar mais informações. 10/05/2016 às 19:14
  • Editei a pergunta para ficar melhor com um melhor entendimento sobre minha dúvida. Veja q na sua resposta, vc pega document.getElementById('ctxt'); e na minha função cada id é ctxt+numero. 10/05/2016 às 19:50

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 .