Pass values from a popup (child) to parent page

Navigation
5

The parent window (jsp) has a popup (child) button. 

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

When you open the popup, there are text fields for the person to enter a word. These input are created dynamically, with a button and a function to create input . The values entered in input are stored in an array and qtdeCampos is the number of fields. The function of the buttons: 

<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>

I would like to know how to pass this array of typed words into the popup for the parent page. The parent page will receive it in an array.

    
asked by anonymous 06.05.2016 / 16:31

3 answers

5

Assuming you have these inputs in the 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>

When you click the Send Data button, the function defined in the onclick will be called, where it will sendData (), where the function will pick up the input values and put in the div that you defined in the parent jsp. 

<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>

For this solution, JavaScript and Jquery were used.

  

Edit

Complementing the answer after changing the question.

In the new function, jquery will go through all inputs with id ctxt , taking the value of each input and inserting into the div with 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>");
    });  
}

Example: link

    
06.05.2016 / 21:10
5

Make it with pure HTML. Just set the target attribute to _parent on your form: 

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

In this way the form will be submitted in the parent window, that is, the window through which you opened the popup.

    
09.05.2016 / 23:16
4

Use the window.opener.document property to manipulate any element on the parent page. 

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();
});

Explaining the example:

  • I added a click event to the element with id meuBotao
  • I'm looking for an element with id meuTextBox (you can manipulate any element) of the calling page (parent)
  • I give this element the value I want.
  • Next I assign focus to it
  • Finally, I close the popup
10.05.2016 / 16:05
Change a date from yyyy-MM-dd to dd-mm-yyyy What is this code for?