Better Way To Pass Many Form Input Values From Child To Parent Window

July 29, 2022 Post a Comment

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

Solution 1:

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 recommend 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.com/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>

Solution 2:

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

Solution 3:

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 magazin