Copy image URL and paste in form on separate page

Question

I have two pages. One is a page with a text input where you can type the url for a profile image. There is a button next to this text are where it opens another page.

This second page you can upload images. I want to be able to click an image on this second page, have it copy the URL, close the window, and paste the URL into the input form from the first page.

Here is the code from the first page:

<div class="form-group">
    <label for="Logo Url">Logo URL</label>
    <input type="text" class="form-control" value= "{{ $affiliate->logo_url }}" name="logo_url" required>
    <button class="button" onClick="window.open('{{route('affiliate.logo')}}'); return false;">
    <span class="icon">Open</span>
    </button>
</div>

This successfully opens the second page. Here I list the images uploaded with the ability to click on them.

foreach($imagelist as $image)
            {
                $url = Storage::disk('s3')->url('').$image['name'];
                echo '<div class="col-xs-3 col-sm-4 col-md-3 col-lg-3">
                <a href="javascript:selectImage(\''.$url.'\')" class="thumbnail">
                <img src='."$url".' class="img-fluid img-thumbnail">
                </a></div><br><br>';
            }

Here I am able to take the url of the image and put it into the variable 'url':

<script type="text/javascript">
    function selectImage(imgName){
    var url = imgName;
    console.log(url);
    }
</script>

Console.log(url) shows that the url is coming through properly, but I have no idea how to send it back to the first page and insert it into the text input.

Any help is appreciated! Thanks!

Answer 1

In the popup window I simply changed the script to this: parentform = name of form on parent window logo_url is the name of the input in the form

<script type="text/javascript">
    function selectImage(imgName){
    opener.document.parentform.logo_url.value=imgName;
    window.close();
    }
</script>