How to pass the content of one textarea, to another from another page using JavaScript or Jquery?

Question

How to pass the content of one textarea, to another from another page using JavaScript or Jquery?

Navigation

#1 by (10 votes)
#2 by (3 votes)

5

I have a page called form.aspx , which contains a form with the following code:

<textarea name="summernote3" id="summernote" runat="server"></textarea>
<img id="Img2" alt="Editar en pantalla Completa" src="../imagenes/botones/editorpantalla.png" class="clase" onclick="ZoomEdit2('<%=summernote.ClientID %>');" />

This is the function that I generated to send the information captured in textarea to another page called edit.aspx

function ZoomEdit2(campo) {
var nw = window.open("../Plugins/editar.aspx?campo=" + campo +"","FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
nw.focus();
}

On the second page edit.aspx , I want to get the value of the first textarea and assign it to another textarea and vice versa.

I was trying with some ajaxcontrol, but I can not get the desired results:

var markupStr = $('#summernote').code();
var txvalor = opener.$get('<%=request("campo")%>').control;
txvalor2.set_content(markupStr);

Is there a way to exchange the information captured in textareas and send them between certain pages?

javascript jquery vb.net asp.net

asked by Jaime Ar 08.01.2016 в 18:43

source

2 answers

3

To access the data on the parent page you can use window.opener

Window opener Property

On this is that you apply the jQuery selector to locate a control and retrieve its value, or assign it, is as simple as:

window.opener.$("#idcontrol")

greetings

To clarify a bit the use of window.opener , here is an example of how everything we write in one window will be replicated in the other (and vice versa).

Example: link

  <html>
   <head>
    <title>replicar texto en ventanas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
     w="";
     $("#edit1").on("keypress",function () {
      w.document.getElementById("edit1").value=$(this).val();
     });
     $("button").on("click", function (){
      w = open("", "_blank", "width=200,height=100");
      w.document.write('<textarea id="edit1" onkeypress="window.opener.$(\'#edit1\').val(this.value)"></textarea>');
     });
    <script>
   </head>
   <body>
    <textarea id="edit1"></textarea>
    <button>abrir otra ventana</button>
   </body>
  </html>

answered by 08.01.2016 в 19:02

Query grouped with different counters Passing GTM 0 to local date

score 10 · Accepted Answer

To pass information from one page (form.aspx) to another window that opens from the first one (edit.aspx), you have several options:

1) Pass the information in the GET

Similar to how the name of the field is passed, you can pass the value (if it is not too large) as part of the URL:

function ZoomEdit2(campo) {
    // obtener el valor del campo (podría hacerse de diferentes maneras)
    var valor = document.getElementById(campo).value;
    // abrir la ventana pasando los valores en la URL
    var nw = window.open("../Plugins/editar.aspx?campo=" + campo + "&valor=" + valor,"FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
    nw.focus();
}

Advantages of this method:

Simple
Implementation similar to the campo attribute that you already process

Disadvantages of this method:

There is a limit on the size of the value you can spend
Users can see the value (it does not offer much privacy or security)

2) Save the values in the LocalStorage

Another option would be to save the value in LocalStorage or SessionStorage before opening the window and then read the value in the new window when it loads.

function ZoomEdit2(campo) {
    // guardar el valor del campo en el localStorage (podría hacerse de diferentes maneras)
    localStorage.setItem('myCat', document.getElementById(campo).value );
    var nw = window.open("../Plugins/editar.aspx?campo=" + campo + "","FORMATO","resizable=1,width=1100,height=600, scrollbars=1");
    nw.focus();
}

Advantages of this method:

Simple and easy to implement
You can save more data than you could pass through the URL

Disadvantages of this method:

It will not work if the user has cookies disabled
It will not work if the protocols do not match (http or https, but not both)

3) Read the father's data from the open window

As indicated in the comments and in another answer, you could access the values of the father using window.parent , so from the open window you can read the field you want like this:

var valorEnPadre = window.opener.document.getElementById("ID_DEL_ELEMENTO").value;

Assuming that the item ID was saved in the campo attribute, then it would be:

var valorEnPadre = window.opener.document.getElementById(campo).value;

Advantages of this method:

Pure and hard JavaScript with no APIs that can fail or browser compatibility issues
There should be no size problems

Disadvantages of this method:

Requires that the pages be on a server (works with http or https but not with file: //)