Question

您好我有一个Laravel Blade模板，我在其中构建了一个搜索功能，我想在页面重新加载后加载div，当我提交表单时。否则，当页面加载结果时，结果不会显示。我希望Javascript在页面上执行（隐藏div），然后当页面刷新时，div必须变为可见。

我的HTML表单是：

<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>

我想在页面加载后显示的div是：

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

我的JavaScript：

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

Answer 1

写下window.onload = showDiv;在你的功能之前

Answer 2

如果您在同一页面上只有一个提交按钮，那么您可以使用像下面那样（未经测试，只是尝试建议）

@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：尝试在Page或Javascript中识别ispostback事件，哪一个更好。

如何在JavaScript中加载页面后显示div？

2 个答案: