Display:'table' не работает так, как должен работать

Я хочу, чтобы таблица была видна только после нажатия кнопки submit. Но она не остается на экране, как это должно быть. Как только я нажимаю кнопку submit, таблица появляется на секунду, а затем снова становится невидимой. Пожалуйста, подскажите, что я делаю не так в своем коде. Также прошу сообщить, есть ли другой способ сделать это.

index.html


 <form action="#" id="form" method="post">

        <div style="margin-left: 2rem;">
            <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
            <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
          </div>


    </form>
      
      
      <div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
        <table style="display: none;" id="table">
          <tbody>
      
            <tr>
      
              <th scope="row">Profile No. : </th>
      
              <td>{{ProfileNo}}</td>
      
            </tr>
      
            <tr>
      
              <th scope="row">Name : </th>
      
              <td>{{Name}}</td>
      
            </tr>
          </tbody>
        </table>
      
      </div>
      
      
      
      <script>
        function hide() {
      
          document.getElementById("form").submit();
      
          let table = document.getElementById("table");
      
          if (table.style.display === 'none') {
      
            table.style.display = 'table';
      
          }
        }
      </script>

Для того чтобы это работало, необходимо использовать AJAX. Если вы сделаете это так, кнопка submit выполнит POST-запрос к серверу, и поэтому вы снова обновите страницу.

Вот хорошее решение для работы: https://www.pluralsight.com/guides/work-with-ajax-django

В Django это можно сделать следующим образом:

views.py: `

def contact(request):
    if request.method == "POST":
        message_name = request.POST['message-name'] 
        # message-name has to be in your form
        # do something with the data in your view
        return render(request, 'template.html', {'message_name': message_name})
#return a variable message_name to the context

template.html:

{% if message_name %}
<center><h2><table id="your table"><tr><td></td></tr></h2></center>
{% else %}
<form action="#" method="post">{% csrf_token %}
<div class="row">
<div>
<input type="text" name="message-name">
</div>
<button type="submit">Display table</button>
</form>
{% endif %}

` Вы можете использовать тип ввода hidden, если не хотите отображать какое-либо поле в форме. Идея заключается в том, чтобы захватить переменную из POST (message-name) и полагаться на нее в представлении (message_name)

Вы также можете использовать localstorage и переключать значение отображения. Javascript на стороне клиента не может получать данные постов, вы можете сохранить значение в localstorage во время отправки формы, когда страница будет перегружена, проверить сохраненное значение, изменить отображение, затем сбросить значение (как будто вы ничего не отправляли снова)

пример (не уверен, что он работает на фрагменте SO, скопируйте и попробуйте его в реальности)

window.onload = function () {
  let mydisplay = localStorage.getItem("myTable");
  console.log(mydisplay);
  if (mydisplay == "table-cell") {
    document.querySelector("#table").style.display = mydisplay;
    localStorage.setItem("myTable", "none");
  } else {
    document.querySelector("#table").style.display = "none";
  }
};
function hide() {
  document.getElementById("form").submit();
  console.log("submit");
  localStorage.setItem("myTable", "table-cell");
}
<form action="#" id="form" method="post">
  <div style="margin-left: 2rem;">
    <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
    <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
  </div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table id="table">
    <tbody>
      <tr>
        <th scope="row">Profile No. : </th>
        <td>{{ProfileNo}}</td>
      </tr>
      <tr>
        <th scope="row">Name : </th>
        <td>{{Name}}</td>
      </tr>
    </tbody>
  </table>
</div>

Здесь находится jsfidlle, куда вы можете скопировать/вставить код для отдельной HTML-страницы для тестирования. https://jsfiddle.net/zb901rLm/

Вернуться на верх