如何将表单结果输出到页面的特定部分？

Question

我有一个web应用程序，它接受用户的输入，并将结果输出到主页的下部。有两对表单标记--主表单和辅助表单。我希望主表单产生的输出显示在次要形式之上。

辅助窗体不输出任何内容。这是一个按钮，显示“显示所有文件夹”。见屏幕截图。我要红色箭头指向的结果。

#!C:\Python\Python38-32\python.exe
import cgi
import os
import re

print("Content-Type: text/html")
print()

input = cgi.FieldStorage()

print("""
<head> 
 <title> Search </title>

 <script type="text/javascript">
 function showHide() {
   var div = document.getElementById('hidden_div');
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
 }
</script>

</head>
<style type="text/css"> 
 body{
  font-size: 16px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  background: #BBDEFB;
 }

 h1{
  font-size: 30px;
  background: #2196F3;
  padding: 5px;
  top: 0px;
  width: 99%;
  height: 50px;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  border-radius: 12px;
  color: #E3F2FD;
 }

 #mainForm form{
  background: #E3F2FD;
  padding: 25px;
  box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
  border-radius: 5px;
 }

  #secondaryForm form{
  background: #E3F2FD;
  padding: 5px;
  box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
  border-radius: 5px;
 }

 .result_1{
  font-size: 15px;
  color: #333;
  padding: 10px;
  background: #cccccc;
  border-radius: 1px;
    box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
 }

  .result_2{
  font-size: 13px;
  color: #333;
  padding: 2px;
  background: #f2f2f2;
  border-radius: 1px;
 }

 input[type=text]{
  background-color: #42A5F5;
  color: #E3F2FD;
  border: none;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 20px 8px 12px;
  margin: 8px 0;
  height: px;
  border-radius: 8px;
 }

 input[type=submit]{
  background-color: #42A5F5;
  padding: 8px 20px;
  border: none;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  box-shadow: 0px 2px 6px rgba(44, 62, 80, 0.35);
 }

 div.a {
  text-align: right;
}

</style>
""")


print("""<body>

<h1><center>SEARCH FILES</center></h1>


<div id="mainForm">
<form action="search_sample.py">
 Enter Value to Search<br>
 <input type="text" name="user_input"><br>
 <br>

 Select File Type<br>
 <input type="radio" name="operator" value="o_file" checked> O File <br>
 <input type="radio" name="operator" value="l_file"> L File <br>
 <br>

 <input type="submit" value="Submit"><br>
</form>
</div>

<div id="secondaryForm">
<form name="showfolders" onsubmit="showHide(); return false;">
<input type="submit" value="Show All Folders" name="show_folder" />
</form>
</div>

""")

# Begin Python script
my_dir = "C:/Users/xstah/OneDrive/Documents/sample_txt/"

# Get all folders  
print('<div id="hidden_div" style="display:none">')
for root, dirs, files in os.walk(my_dir):
    for file in files:
        if file.endswith(".dat"):
            filename2 = os.path.join(root, file)
            
            filepath_split = os.path.normpath(filename2)
            path_list = filepath_split.split(os.sep)
            hostname = path_list[6]
            foldername = path_list[7]
            print('<div class="result_1">{}</div>'.format('<b>'+ hostname + '</b>'))
            print('<div class="result_2">{}</div>'.format(foldername))
        
print('</div>')
    
# User input & selection
user_input = input["user_input"].value
operation = input["operator"].value

# End Python script
    
print("</body>")

Answer 1

尝试在主窗体和辅助窗体之间创建div，并使用js执行innerHTML或innerText。