Redirect page and detect if it has loaded

so I have a form on another page (for-sale) which displays all of my properties at the top of this page there is a form for filtering. One of the inputs inside the filters allows you to type in an area and check for properties in that area.

Now I also have created a loop in the footer which displays all the areas where I currently have properties. When a user clicks on one of these areas I store the value of this link, then redirect to the for-sale page. Now this is where it gets complicated I want to detect if this for-sale page has loaded then once it has I want to place the link value into the input inside the form and then submit it.

But as it is right now what happens is the value tries to inject into the input before the page has even loaded. So until the page has loaded I need the code to pause. Is this possible or do I need to go about this another way?

Here's my code so far I haven't added the form submit as there is no point right now as it doesn't work.

My js

<script>
    jQuery(document).ready(function($){
        $('.ft_town').click(function(e){
            e.preventDefault();
            var area = $(this).html();

            window.location.href = "http://mydomain.co.uk/for-sale/";

            $('#location_search').val(area);
        });
    });
</script>

for sale page form

<form action="" method="GET" id="filters">
    <div id="top_bar">
        <input id="location_search" type="text" placeholder="Enter a search location" name="location">
    </div>
    <button id="button" type="submit" style="display: none;">Apply filters</button>
    <input type="hidden" name="action" value="forsalefilter">
</form>

footer code where I get the property areas

<div class="col-md-6">
    <h3>Properties available in</h3>
    <div class="row">
        <?php 
            $args = array(
                'post_type'         => 'property',
                'posts_per_page'    => -1,
                'meta_key'          => 'property_status',
                'meta_value'        => 'For Sale'
            );

            $query = new WP_Query($args);
        ?>

        <?php if( $query->have_posts() ): ?>
            <?php while( $query->have_posts() ): $query->the_post(); ?>
                <?php $town_array[] = get_field('town'); ?>
            <?php endwhile; ?>

            <?php 
                wp_reset_query();

                $towns = array_unique($town_array);//removes duplicates
                $towns = array_values($towns);//re-indexs values after dups have been removed

                for($i = 0; $i < count($towns); $i++){
                    echo "<div class='col-md-6'><ul><li><a class='ft_town' href='javascript:;'>".$towns[$i]."</a></li></ul></div>";
                }
            ?>

        <?php endif; ?>
    </div>

Solution

This is not how Javascript works. It will only affect the currently loaded DOM. You cannot make a page transfer and amend that new DOM within the JS of the previous.

To achieve what you require you need to send the value to the new page, then work with it there. You could do that using cookies, the querystring, server side session (through AJAX), or local/sessionStorage. The latter is by far the simplest, so here's an example using it:

Firstly, in the footer add the JS which sets the value in localStorage:

jQuery(function($){
  $('.ft_town').click(function(e){
    e.preventDefault();
    localStorage.setItem('area', $(this).text());
    window.location.assign('http://mydomain.co.uk/for-sale/');
  });
});

Then in your form page you can read that value back out of localStorage - assuming one was set:

jQuery(function($) {
  var area = localStorage.getItem('area');
  if (area) {
    $('#location_search').val(area);
    localStorage.removeItem('area'); // optionally remove the item if you want single usage
  }
});