Pass values from a popup (child) to parent page

Question

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

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

When you open the popup, there are text fields for the person to type a word. Those input are created dynamically, with a button and a function to create more input. The values typed in input are stored in an array and the qtdeCampos is the amount of fields. The function of 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 words typed in the popup to the parent page. The parent page will receive you in an array.

Answer 1

You can do it with pure HTML. Just set the attribute target as _parent on your form:

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

This way the form will be submitted in the parent window, that is, the window through which you opened the pop-up.

Answer 2

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 onclick will be called, and it will be sent Data(), where the function will take the input values and put in the div that you set 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>

This solution was used Javascript and Jquery.

Edit

Supplementing the answer after the amendment of the question.

In the new function, jquery will run all inputs with id ctxt, taking the value of each input and inserting in the div with the 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: https://jsfiddle.net/p0L2g7wp/1/

Answer 3

Use the property window.opener.Document 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
• Looking for an element with id meuTextBox (you can manipulate any element) of the calling page (parent)
• I assign this element the value I want
• Then I assign the focus to it
• And finally, I close the popup