How to open a new window with jQuery and access the elements in the new window?

Question

I have a HTML form where I have two select elements with options and two input elements.

<form>
<select name="highSchool">
<option value="8342">Clinton High School</option>
<option value="9576">Washington High School</option>
<option value="8172">Roosevelt High School</option>
<option value="5431">Lincoln High School</option>
<option value="2460">Kennedy High School</option>
</select>

<br><br>

<select name="title">
<option value="1">Amazing Artist</option>
<option value="2">Awesome Athlete</option>
<option value="3">Marvelous Musician</option>
<option value="4">Scholar Student</option>
<option value="5">Wonderful Writer</option>
</select>
<br><br>
<input type="text" name='firstName' size="80" maxlength='30'>
<br><br>
<input type="text" name='lastName' size="80" maxlength='30'>
<br><br>
<button onclick="myFunction1()">Submit</button>
</form>

I have a script to auto fill the fields based on a randomized dictionary and submit the form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var random_dict = {'highSchool': 'Washington High School',
                   'title': 'Marvelous Musician',
                   'firstName': 'John',
                   'lastName':'Smith'}

//find correct option and select it
$("select[name='highSchool']").find('option').each(function(index,element){ 
if (element.text === random_dict.highSchool){
    $("select[name ='highSchool']").val(element.value);
                    };
});
//find correct option and select it
$("select[name='title']").find('option').each(function(index,element){ 
if (element.text === random_dict.title){
    $("select[name ='title']").val(element.value);
                    };
});
//fill the input elements
$("input[name ='firstName']").val(random_dict.firstName);
$("input[name ='lastName']").val(random_dict.lastName);

//submit form when done, this is the second form on the page
document.forms[1].submit();
}
</script>

I can only receive the select option as element.text , so I iterate through the select options until I find the corresponding element.value . This script works when I run it.

I want to open my form in a new window and perform all of the same actions. I have tried to re-write it like this but it doesn't work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var windowName = $(this).attr('id');
var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
var random_dict = {'highSchool': 'Washington High School',
                   'title': 'Marvelous Musician',
                   'firstName': 'John',
                   'lastName':'Smith'}

newWindow.document.$("select[name='highSchool']").find('option').each(function(index,element){ if (element.text === random_dict.highSchool){
    newWindow.document.$("select[name ='highSchool']").val(element.value);
                    };
});

newWindow.document.$("select[name='title']").find('option').each(function(index,element){ if (element.text === random_dict.title){
    newWindow.document.$("select[name ='title']").val(element.value);
                    };
});
newWindow.document.$("input[name ='firstName']").val(random_dict.firstName);
newWindow.document.$("input[name ='lastName']").val(random_dict.lastName);
newWindow.document.forms[1].submit();
}
</script>

How can I adjust all of the jQuery selectors like $("input[name ='firstName']") and $("select[name='title']") to get the elements in the new Window? I'm open to both jQuery and Vanilla JS solutions.

Answer 1

I believe you need to attach your script to the new window, like so:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.createElement('script');
script.src = 'js/myScript.js';
newWindow.document.head.appendChild(script);

To access the elements in the new window, you need to simply reference the newWindow's document, like so:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.$("input[name ='firstName']").html('test');

Translated the script partially to Vanilla JS to do the exact same things for newWindow:

var windowName = $(this).attr('id');
var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
$(newWindow).on("load", function()
    {
      for (var i = 0; i < newWindow.document.querySelector("select[name='highSchool']").options.length; i++){
            var option = newWindow.document.querySelector("select[name='highSchool']").options[i];
            if (option.text === random_dict.highSchool){
                  newWindow.document.querySelector("select[name='highSchool']").value = option.value;
                  break;
            };
      };
            
            
      for (var j = 0; j < newWindow.document.querySelector("select[name='title']").options.length; j++){
            var option1 = newWindow.document.querySelector("select[name='title']").options[j];
            if (option1.text === random_dict.title){
                  newWindow.document.querySelector("select[name='title']").value = option1.value;
                  break;
            };
      };

      newWindow.document.querySelector("input[name='firstName']").value = random_dict.firstName;
      newWindow.document.querySelector("input[name='lastName']").value = random_dict.lastName;
});