How to show a div after page loads in JavaScript?

Question

Hi I have a Laravel Blade template where I built a search function and I want to load a div after the page has reloaded, when I submit the form. Otherwise when the page loads with the results, the results don't show. I want the Javascript to execute while on the page (hide the div), and then when the page refreshes then the div must become visible.

My HTML form is:

<form action="" class="search-form" method="GET" onsubmit="showDiv();">
    <input type="text" name="location" placeholder="Search" required>
    <button class="search-btn" type="submit"><i class="flaticon-026-search"></i></button>
  </form>

And the div I want to show after page load is:

<div id="hideDiv" style="display:none">
  @foreach($locations as $location)
    @foreach($location->landmark as $landmark)
       <p>{{$landmark->name}}</p>
    @endforeach
  @endforeach
</div>

My JavaScript:

function showDiv() {
   var div = document.getElementById("hideDiv");
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'block';
   }
 }

Possible duplicate of [JavaScript that executes after page load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Ionut Necula, May 10 '18 at 06:45
No not really, I want the Javascript to execute while on the page, and then when the page refreshes then the div must become visible — I Love Code, May 10 '18 at 06:51
You can set a variable in `localStorage` at first page load and then verify if it exists on further page loads based on which you will show/hide your div. Also you can use cookies. It's your choice. — Ionut Necula, May 10 '18 at 07:22
Are you trying to show the div when the `$locations` has value and hide it when `$locations` is null? — iamab.in, May 10 '18 at 08:06
The location gets typed typed in the searchbox and retrieves the landmarks. But the results of the landmarks already show when I open the page, so when I type the location it just minimises the search results to those with the linked location. I dont want the div to view when I load the page at first, only after I have enetered the location value and clicked on 'submit' @ab_ab — I Love Code, May 10 '18 at 10:11

score 0 · Answer 1 · answered May 10 '18 at 07:04

0

Write window.onload = showDiv; before your function

answered May 10 '18 at 07:04

Gregman-js

11
2

div.style.display = ''; replace with div.style.display = 'block'; – Gregman-js May 10 '18 at 07:09
no... when I add window.onload = showDiv; before the function, then the div shows. When I add widow.onload = function... then the div shows as well. I don't want the div to show when I go on the page, but once I submit the button I want the div to show after the page has reloaded. – I Love Code May 10 '18 at 07:26
if you dont wanna shoe the div at any load but only on submit you have to use php. add `showDiv() – Yosef Tukachinsky May 10 '18 at 07:46

score 0 · Answer 2 · answered May 10 '18 at 10:41

If you have only one submit button on same page than you can use like bellow (not tested, just try to suggest)

@if (Request::isMethod('post'))
 <div id="hideDiv" style="display:none">
   @foreach($locations as $location)
     @foreach($location->landmark as $landmark)
       <p>{{$landmark->name}}</p>
    @endforeach
   @endforeach
 </div>
@endif

PS: try to identify ispostback event in Page or Javascript which one is preferable.

How to show a div after page loads in JavaScript?

2 Answers2