Receive values (popup) on parent page

Question

Receive values (popup) on parent page

Navigation

#1 by (3 votes)

1

In another question, you have been able to help me to store the values of some input of a popup, to pass to the parent page.

Summary.jsp (parent page)

<input type="button" onclick="test();" value="Palavras" />
<div id="idPai"></div>

function test(){
  window.showModalDialog('saida.jsp',null,'status:off;center:yes;scroll:no;');
}

In the popup, there is a function, addCampos() , for the user to create multiple fields input .

saida.jsp (popup)

<div id="campoPai"></div>
<input type="text" id='ctxt' name="campo[]" class="form-control">   
<input type="button" value="Adicionar campos" onclick="addCampos()">
<button class="btn btn-success" onclick="enviaDados();">Envia Dados</button>

<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++;
  }
  function removerCampo(id) {
    var objPai = document.getElementById("campoPai");
    var objFilho = document.getElementById("filho"+id);
    //Removendo o DIV com id específico do nó-pai:
    var removido = objPai.removeChild(objFilho);
  }
</script>

In the method below, it is the main part of the other question, where the values (an array) are passed to the parent page.

<script language="javascript">
  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>");
    });
    window.close();
  }
</script>

Update

My problem is that I do not know how to use (pick up) this value on the parent page. What I need is: the user will type several words in the popup, when closing the popup, the words typed will be compared with a java array, and thus only the typed words that are contained in that array will be shown on the screen.

javascript html popup

asked by anonymous 13.05.2016 / 04:28

1 answer

str_replace generating error Array to string conversion Develop layout with 3 columns

score 3 · Answer 1

Now, to get the data you use the same function ( $(this).val() ), inside the each , which is assigning the values in div#idPai of HTML.

To store these values in a array you declare a variable before the enviaDados function. Within each , at each execution, you add in the array value using the push() .

See what's in the code:

<script language="javascript">
  var arrayDados = []; // declaração do array no escopo global.
  function enviaDados(){
    $("#idPai").html(""); // Aqui irá resetar o conteudo da div.
    $('input[id^="ctxt"]').each(function(){
      arrayDados.push($(this).val()); // adiciona o valor no array.
      $("#idPai").append("<p><b> Valor do Imput: "+$(this).val()+"</b></p>");
    });
    window.close();
  }
</script>

This implementation is to save the values that came from the modal in a array in the global scope of JavaScript, being able to access from the parent page.

@Edit

Assuming you have created a array in JS with JAVA values, as our friend @Matheus said in the comments, being this array of global scope. To check the existence of the values you can use the indexOf() to validate.

Obs: Let's say you created array var ArrayJScomValoresDoJava = [x,p,t,o] with array values of JAVA.

See what's in the code:

<script language="javascript">
  function enviaDados(){
    $("#idPai").html(""); // Aqui irá resetar o conteudo da div.
    $('input[id^="ctxt"]').each(function(){
      if(ArrayJScomValoresDoJava.indexOf($(this).val()) != -1) {
        $("#idPai").append("<p><b> Valor do Imput: "+$(this).val()+"</b></p>");
      };
    });
    window.close();
  };
</script>

This implementation will add to div#idPai only when the modal value exists in array , read about indexOf if there are any questions.