首页 > 解决方案 > 无法检测到 div 的单选按钮 不产生输出 只能检测到主单选按钮

问题描述

大家好,我尝试使用 python Flux 和 html 运行一个简单的程序。我能够检测到前 2 个单选按钮,即“比特币地址”和“交易哈希”。但我无法检测到最后 3 个单选按钮“双模式”、“地址网络”和“交易网络”。当我说在选择 3 个 div 单选按钮(其中任何一个)后无法检测到时,它会返回我而没有结果,有人可以帮我吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!----<style>
      body { </b>ackground: url(https://specials-images.forbesimg.com/imageserve/5e00d824e961e1000739c13a/960x0.jpg?fit=scale); background-size:100%; }
    </style>--->
<style>
* {
  box-sizing: border-box;
}

div {
  border: double;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The grid: Three equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 15px;
  color: black;
  text-align: left;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the container tab */
.closebtn {
  float: right;
  color: black;
  font-size: 35px;
  cursor: pointer;
}


</style>
<head>
</head>
<body>
<form method="post">
    <br>
    <span style="font-size: 250%"><center> Bitcoin Dashboard </center></span><br>
    <input style="font-size:15px;" type="text" name="transactionid" size="60" placeholder="Enter a Bitcoin address/transaction">
    &emsp;This is: 
    <input type="radio" name="gender" id ="BitcoinAddr" value="bitcoin" checked> 
    <label for="BitcoinAddr">Bitcoin Address</label>
    &emsp;
    <input style="font-size:20px;" type="submit" value="Submit"><br>
    Search depth:
    <input type="range" name="rangeInput" min="1" max="10" onchange="updateTextInput(this.value);">
    <input style="font-size:15px;" type="text" id="textInput" value="5">
    &emsp;&emsp;&ensp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;

    <input type="radio" name="gender" id="TrHash" value="transaction">
    <label for="TrHash">a transaction hash</label><br><br><br>
</form>
<div class="row">
  <div class="column" onclick="openTab('b1');" style="background:grey;">Plot</div>
  <div class="column" onclick="openTab('b2');" style="background:grey;">Filter Edges</div>
  <div class="column" onclick="openTab('b3');" style="background:grey;">Find Paths</div>
  <div class="column" onclick="openTab('b4');" style="background:grey;">Cluster</div>
  <div class="column" onclick="openTab('b5');" style="background:grey;">Neighbours</div>
</div>



<!------------------------------------------------------------------->
<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="background:white">
  <!-- If you want the ability to close the container, add a close button -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
  <form method="post">
    <span style="float: left"><b>View: </b></span>
    <center><b> Zoom: <input type="range" name="rangeInput" min="1" max="10" onchange="updateTextInput1(this.value);"><input style="font-size:15px;" type="text" id="textInput1" value="5"></b>&emsp;&emsp;&emsp;&emsp;  
    <b><input style="font-size:20px;" type="checkbox" name="Label" value="Label"> Labels</b>&emsp;
    <input style="font-size:20px;" type="submit" value="Submit"></center>

    &emsp;&emsp;&emsp;
    <input type="radio" name="gender" id="DualMode" value="DualMode" checked>
    <label for="DualMode">Dual Mode</label><br>

    &emsp;&emsp;&emsp;
    <input type="radio" name="gender" id="AddrNet" value="AddrNet">
    <label for="AddrNet">Address Network</label><br>
    &emsp;&emsp;&emsp;
    <input type="radio" name="gender" id="TrNet" value="TrNet">
    <label for="TrNet">Transaction Network</label>
    <br><br>
    <div>
      {{outputresult}}
<!--     {% if result != None %}
      <img src="data:image/png;base64,{{ outputresult }}"\>
    {% endif %} -->
    </div>
  </form>
</div>

我使用烧瓶与 HTML 链接。

from flask import Flask, render_template, url_for, request
import base64 #enconder, encodes the graph into html strings
from io import BytesIO # converter, convert the data into the encoder strings
from flask import Flask
from neo4j import GraphDatabase #Graphdatabase for Neo4j
from neo4j.types.graph import Node, Relationship
import networkx as nx #graph plotting tool for neo4j,create the graph without display
import time
import matplotlib as plt #displaying the graph that is plotted by networkx
plt.use('TkAgg')
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure

app = Flask(__name__)


@app.route("/")
def home():
    return render_template('home.html')

@app.route("/", methods=['GET','POST'])
def index():
    # if form.validate_on_submit():
    if request.method == 'POST':
      if 'transactionid' in request.form:
          option = request.form['gender'] 
          option1 = request.form['gender']
          if option == "bitcoin" and option1 == "DualMode":
          # transactionaddr = request.form['transactionid']
          # newresult = generateAndConvertGraph(transactionaddr)
                newresult = "bitcoin and DualMode"
                return render_template('home.html', outputresult=newresult)
          elif option == "bitcoin" and option1 == "AddrNet":
                newresult = "bitcoin and Adress Network"
                return render_template('home.html', outputresult=newresult)
          elif option == "bitcoin" and option1 == "TrNet":
                newresult = "bitcoin and Transaction address"
                return render_template('home.html', outputresult=newresult)
          else:
            newresult = "cant detect div radio button"
            return render_template('home.html', outputresult=newresult)

      elif 'BTCamt' in request.form:
          BTCaddr = request.form['BTCamt']
          newresult = generateAndConvertGraph(BTCaddr)
          return render_template('home.html', outBTC=newresult)

    return render_template('home.html')

标签: pythonhtmlflask

解决方案


首先,你有两个@app.route( "/")。一种处理 GET 和 POST 请求,另一种不处理。将另一条路线应用于实际表单“处理程序”将是一个好主意。如果只是为了清楚。您的路线可能如下所示:

@app.route("/form_handler", methods=['GET','POST'])

其次,可能与没有设置“表单”的动作属性有关。action 属性定义了在提交时应该重定向到哪个页面以及应该将表单发布到哪个路由。这可能会有所帮助:https ://www.w3schools.com/html/html_forms.asp 。在您的情况下,action 属性的值应该是:"/"。如果使用上面所说的路线,它应该是:"/form_handler".

您的表单应如下所示:

<form method="post" action="/form_handler">

希望这会有所帮助。


推荐阅读