Flask+HTML项目中Div内Radio Button无法检测问题求助

看起来你遇到的核心问题是两个独立表单的提交逻辑没被后端正确区分，再加上表单内单选框命名冲突，导致Plot标签页的选项提交后完全没触发对应的处理逻辑。咱们一步步来搞定：

1. 前端表单的核心问题 #

你页面里有两个完全独立的<form>标签：第一个是初始的查询表单，第二个是Plot标签页内的视图设置表单。

• 两个表单的单选框都用了name="gender"，这会让后端接收数据时容易混淆；
• 第二个表单提交时，后端代码里的判断条件'transactionid' in request.form永远不成立（因为第二个表单里根本没有transactionid输入框），所以直接跳过了所有处理逻辑，自然没有结果返回。

前端代码修改建议 #

给Plot标签页的表单做两个关键调整：

• 把单选框的name改成和第一个表单不同的，比如view_mode，彻底避免命名冲突；
• 新增一个隐藏字段，用来标识这个提交来自Plot表单，方便后端判断。

修改后的Plot表单代码示例：

<div id="b1" class="containerTab" style="background:white">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
  <form method="post">
    <!-- 新增隐藏字段，标记这是Plot表单的提交 -->
    <input type="hidden" name="form_source" value="plot">
    
    <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>
    &nbsp;&emsp;&emsp;&emsp;
    <!-- 修改单选框name为view_mode，和第一个表单的gender区分开 -->
    <input type="radio" name="view_mode" id="DualMode" value="DualMode" checked>
    <label for="DualMode">Dual Mode</label><br>
    &nbsp;&emsp;&emsp;&emsp;
    <input type="radio" name="view_mode" id="AddrNet" value="AddrNet">
    <label for="AddrNet">Address Network</label><br>
    &nbsp;&emsp;&emsp;&emsp;
    <input type="radio" name="view_mode" id="TrNet" value="TrNet">
    <label for="TrNet">Transaction Network</label>
    <br><br>
    <div>
      {{outputresult}}
    </div>
  </form>
</div>

另外建议把第一个表单的name="gender"改成更语义化的query_type，比如：

<input type="radio" name="query_type" id ="BitcoinAddr" value="bitcoin" checked>
<label for="BitcoinAddr">Bitcoin Address</label>
<!-- 下面的transaction hash单选框也同步修改name -->
<input type="radio" name="query_type" id="TrHash" value="transaction">
<label for="TrHash">a transaction hash</label>

2. 后端逻辑的适配修改 #

后端需要区分不同表单的提交，还要保存用户之前选择的查询类型（因为Plot表单是后续操作，依赖初始的查询上下文），这里用Flask的session来保存上下文最方便：

from flask import Flask, render_template, url_for, request, session
import base64
from io import BytesIO
from neo4j import GraphDatabase
from neo4j.types.graph import Node, Relationship
import networkx as nx
import time
import matplotlib as plt
plt.use('TkAgg')
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure

app = Flask(__name__)
# 必须设置secret_key才能使用session，随便写一串安全的字符就行
app.secret_key = "your_own_secret_key_here_123"

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

@app.route("/", methods=['GET','POST'])
def index():    
    if request.method == 'POST':
        # 处理初始查询表单的提交
        if 'transactionid' in request.form:
            query_type = request.form.get('query_type')
            # 把查询类型存入session，供后续Plot表单使用
            session['query_type'] = query_type
            transaction_addr = request.form['transactionid']
            # 这里可以保留你原来的生成逻辑，暂时用测试文本替代
            newresult = f"已选择: {query_type}，地址/交易ID: {transaction_addr}"
            return render_template('home.html', outputresult=newresult)
        
        # 处理Plot标签页表单的提交
        elif request.form.get('form_source') == 'plot':
            # 从session取出之前保存的查询类型，默认设为bitcoin
            query_type = session.get('query_type', 'bitcoin')
            view_mode = request.form.get('view_mode')
            
            # 根据组合返回对应结果
            if query_type == "bitcoin" and view_mode == "DualMode":
                newresult = "bitcoin and DualMode"
            elif query_type == "bitcoin" and view_mode == "AddrNet":
                newresult = "bitcoin and Address Network"
            elif query_type == "bitcoin" and view_mode == "TrNet":
                newresult = "bitcoin and Transaction Network"
            elif query_type == "transaction" and view_mode == "DualMode":
                newresult = "transaction and DualMode"
            # 可以继续补充其他组合的逻辑
            else:
                newresult = f"查询类型: {query_type}，视图模式: {view_mode}"
            return render_template('home.html', outputresult=newresult)
    
    return render_template('home.html')

3. 关键逻辑说明 #

• Session的作用：因为两个表单是独立提交的，所以用session保存用户初始选择的查询类型，这样Plot表单提交时就能获取到之前的上下文，不会丢失状态；
• 表单标识：通过隐藏字段form_source让后端准确判断是哪个表单的提交，避免逻辑混乱；
• 命名区分：把不同表单的单选框name分开，彻底解决数据混淆的问题。

内容的提问来源于stack exchange，提问作者Qi Nan Sun