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

February 28, 2024 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(/*....*/);`varvalue = child.document.getElementById("someId").value;
```

Here's an example using a callback:

Parent: Live Copy | Live Source

<!DOCTYPE html><html><head><metacharset=utf-8 /><title>Child Callback - Parent Window</title></head><body><inputtype="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);
      };

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

Child: Live Source

<!DOCTYPE html><html><head><metacharset=utf-8 /><title>Child Window</title></head><body><inputtype="text"id="textField"value="some value"><br><inputtype="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

<textareaid="output_id"></textarea><iframeid="child_iframe_id"src="child.html"></iframe><scripttype="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

<formid="child_id"method="get"><inputname="n1" /><inputname="n2" /><selectname="n3" ><optionvalue="v1">value</option></select><inputtype="submit"value="save to parent" /></form>

Learn Html5