Обновление того же сайта с помощью модуля Python Flask - PullRequest
Новая
       2

Обновление того же сайта с помощью модуля Python Flask

0 голосов
/ 29 мая 2020

Фон:

Я новичок в разработке интерфейса и модуля Flask в Python. Мне трудно обновить ту же страницу.

Чего я хочу достичь:

Есть три части того, чего я хочу достичь

Часть / Шаг 1: Я могу создать форму, подобную приведенной ниже

enter image description here

Часть / Шаг 2: Когда форма заполнена, как показано ниже, и нажата кнопка [проверить], она переходит к Шаг 3 enter image description here

Часть / Шаг 3: После нажатия кнопки проверки под ней помещается переданная информация. Также есть две кнопки, с кнопкой [зафиксировать] и [отменить]. Если нажать [отменить], сайт будет восстановлен до состояния Шаг 1 . При нажатии [commit] он переходит на другой веб-сайт на шаге 4

enter image description here

Часть / Шаг 4 : Если на изображении выше нажать [commit], будет получен другой сайт со следующим сообщением.

enter image description here

Примечание:

Рад поделиться своим кодом, но у меня есть только пустая форма в шаге 1. Я не могу продолжить после этого. Как уже упоминалось, я новичок в интерфейсах.

Обновление: Сейчас у меня проблемы с двумя вещами:

  1. Когда Я нажимаю [отменить], вся форма сдвигается влево ( Как мне сделать это по центру? )
  2. Как я могу напечатать несколько вещей (в идеале в центрированной таблице) после нажатия кнопка [проверить] 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value
        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>


    <style>
        h3 {text-align: center;}
        .right {
            text-align: right;
            margin-right: 1em;
            }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
    </style>

</head>

<h3>Personnel Details</h3>
<div class="center" id="form">
	<table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <select name="gender">
          <option value=""></option>
          <option value="male">Mr.</option>
          <option value="female">Ms.</option>                    
        </select>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <input id="first_name">
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <input id="middle_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <input id="last_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <input id="email">
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31">
      </td>    
	</tr>    
    
    <tr>
      <td>
      </td>
      <td  class="center">
        <div>
            <button onclick="onVerify()">Verify</button>
        </div>
      </td>
    </tr>
    
    
    
    </table>
</div>
<div id="verify">
    <div id="verifyName">
    </div>
    <button onclick="onCommit()">Commit</button>
    <button onclick="onCancel()">Cancel</button>
</div>
<div id="committed">
    Committed! :)
</div>
</html>

1 Ответ

0 голосов
/ 30 мая 2020

Это всего лишь минимальный код, который я использовал, чтобы просто дать представление о том, как добиться аналогичного поведения с одним полем ввода. Вы можете легко расширить это поле другими полями. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("name").value
        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>
<div id="form">
    <label> First Name:
        <input id="name">
    </label>
    <div>
        <button onclick="onVerify()">Veryfy</button>
    </div>
</div>
<div id="verify">
    <div id="verifyName">
    </div>
    <button onclick="onCommit()">Commit</button>
    <button onclick="onCancel()">Cancel</button>
</div>
<div id="committed">
    Committed! :)
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...