javascript - Better way to pass many form input values from child to parent window

I have a child window which has a bunch of radio buttons. I would want to send all these many values to the opener window.

I am achieving this by appending all the input names and values to a javascript string. I am then using window.opener property to assign string to hidden field in parent window.

Code is like,

document.getElementById("Errnodata").innerHTML = "" ;  
var joinedArray = literal.join(", ");
window.opener.document.getElementById("myarray").value= joinedArray;
window.opener.getVolunteerDetails();
window.close();

So this means joinedArray string has form like name1,value1,name2,value. And is there any better way to pass many values to the parent window? Or any idiomatic/accepted way?

Thanks.

I have a child window which has a bunch of radio buttons. I would want to send all these many values to the opener window.

I am achieving this by appending all the input names and values to a javascript string. I am then using window.opener property to assign string to hidden field in parent window.

Code is like,

document.getElementById("Errnodata").innerHTML = "" ;  
var joinedArray = literal.join(", ");
window.opener.document.getElementById("myarray").value= joinedArray;
window.opener.getVolunteerDetails();
window.close();

So this means joinedArray string has form like name1,value1,name2,value. And is there any better way to pass many values to the parent window? Or any idiomatic/accepted way?

Thanks.

Share Improve this question asked Jul 16, 2013 at 16:26 yoda 5693 gold badges12 silver badges34 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You have lots of options. The parent window's window object is available to you (as you've found) via window.opener. The child window's window object is also availble to the parent, it's the return value of window.open. So the two can talk directly.

This means you can...

...assign values to the parent directly, or (ideally) to an object it makes available on that for the purpose.

In the parent:
```
window.results = {};
```
In the child:
```
opener.results.name = "value";
opener.results.anotherName = "another value";
```
...or have the child window call a function on the parent:
```
opener.callback(/*...values here...*/);
```
...passing in individual values, or an object, etc.
...or have the parent window reach out and interact directly with the child's controls (but that creates a lot of tight coupling and I don't remend it):
```
// Assuming you did `var child = window.open(/*....*/);`
var value = child.document.getElementById("someId").value;
```

Here's an example using a callback:

Parent: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Callback - Parent Window</title>
</head>
<body>
  <input type="button" id="btnOpen" value="Open Child Win">
  <script>
    (function() {
      var child;

      document.getElementById("btnOpen").onclick = function() {
        if (!child) {
          child = window.open("http://jsbin./ukuvaj/1");
        }
      };

      window.callback = function(value) {
        display("Got callback from child, value = " + value);
      };

      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>

Child: Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Window</title>
</head>
<body>
  <input type="text" id="textField" value="some value">
  <br><input type="button" id="btnSend" value="Send to Parent">
  <script>
    (function() {
      document.getElementById("btnSend").onclick = function() {
        opener.callback(document.getElementById("textField").value);
      };
    })();
  </script>
</body>
</html>

You don't have to pass a string, you can pass anything to the opener window. Below is some sample code you can use. The parent opens the child, and the child sets some variables on the parent using object literal notation.

Parent

    window.open('child.html');
    function showSettings() {
        // should say "hello"
        alert(myGlobalSettings.str);
    }

Child

    window.opener.myGlobalSettings = {
        str: 'hello',
        array: ['a', 'b', 'c'],
        obj: {
            x: 123
        }
    };
    window.opener.showSettings();

A clean method if you were using an IFRAME for the child

Have the child form do a GET submission to itself and have the parent listen to the child frame's onload event and parse the data out of the new location.href 's query string.

parent.html

<textarea id="output_id"></textarea>
<iframe id="child_iframe_id" src="child.html"></iframe>
<script type="text/javascript">
    var iframe = document.getElementById("child_iframe_id");
    iframe.onload = function() {
        var href = iframe.contentWindow.location.href;
        var result = "";
        var data;
        if(href.indexOf("?") >= 0) {
            data = href.split("?")[1].split("&");
            for(var i=0; i<data.length; i++) {
                var pair = data[i].split("=");
                result += decodeURIComponent(pair[0]) + " : ";
                result += decodeURIComponent(pair[1]) + "\n";
            }
        }
        document.getElementById("output_id").value = result;
    }
</script>

child.html

<form id="child_id" method="get">
<input name="n1" />
<input name="n2" />
<select name="n3" >
<option value="v1">value</option>
</select>
<input type="submit" value="save to parent" />
</form>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Better way to pass many form input values from child to parent window - Stack Overflow

3 Answers 3

Parent

Child

与本文相关的文章

评论列表(0)