如何实现按钮切换与表单提交同时进行？

表单提交后浏览器会重新加载页面，所有DOM元素会恢复到初始渲染状态，所以JavaScript修改的显示设置会被还原。下面提供三种可行方案：

方案1：后端控制按钮显示状态 #

通过后端跟踪当前操作状态（比如"已启动"或"已暂停"），在渲染页面时动态设置按钮的display属性，确保页面加载后直接显示正确的按钮。

修改后的HTML模板： #

<div class="images-board">
  <div id="iniciar" class="buttons" style="{% if current_state == 'paused' %}display:block{% else %}display:none{% endif %}">
    <form class="btn" action="{{ url_for("index")}}" method="post">
      <button class="form btn btn-dark" onclick="test()" type="submit"><i class="fa fa-trash"></i> Iniciar</button>
    </form>
  </div><br>

  <div id="pausar" class="buttons" style="{% if current_state == 'started' %}display:block{% else %}display:none{% endif %}">
    <form class="btn" action="{{ url_for("index")}}" method="get">
      <button class="form btn btn-dark" onclick="test()" type="submit"><i class="fa fa-trash"></i> Pausar</button>
    </form>
  </div><br>
</div>

后端逻辑示例（以Flask为例）： #

from flask import Flask, render_template, session, request

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@app.route('/', methods=['GET', 'POST'])
def index():
    # 初始化或更新状态
    if request.method == 'POST':
        session['current_state'] = 'started'
    elif request.method == 'GET':
        # 可通过表单隐藏字段区分提交动作，此处简化处理
        session['current_state'] = 'paused'
    # 获取当前状态，默认显示Iniciar按钮
    current_state = session.get('current_state', 'paused')
    return render_template('index.html', current_state=current_state)

方案2：AJAX异步提交表单（无页面刷新） #

通过JavaScript的fetch API异步提交表单，避免页面重载，这样按钮的显示状态修改后不会被重置。

修改后的HTML： #

<div class="images-board">
  <div id="iniciar" class="buttons">
    <form class="btn iniciar-form" action="{{ url_for("index")}}" method="post">
      <button class="form btn btn-dark" type="submit"><i class="fa fa-trash"></i> Iniciar</button>
    </form>
  </div><br>

  <div id="pausar" style="display:none" class="buttons">
    <form class="btn pausar-form" action="{{ url_for("index")}}" method="get">
      <button class="form btn btn-dark" type="submit"><i class="fa fa-trash"></i> Pausar</button>
    </form>
  </div><br>
</div>

对应的JavaScript： #

// 切换按钮显示状态的通用函数
function toggleButtons() {
  const iniciarBtn = document.getElementById("iniciar");
  const pausarBtn = document.getElementById("pausar");
  
  if (iniciarBtn.style.display === "none") {
    iniciarBtn.style.display = "block";
    pausarBtn.style.display = "none";
  } else {
    iniciarBtn.style.display = "none";
    pausarBtn.style.display = "block";
  }
}

// 监听Iniciar表单提交
document.querySelector('.iniciar-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认页面刷新
  const form = this;
  
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })
  .then(response => {
    if (response.ok) toggleButtons(); // 提交成功后切换按钮
  })
  .catch(error => console.error('提交失败:', error));
});

// 监听Pausar表单提交
document.querySelector('.pausar-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const form = this;
  
  fetch(form.action, {
    method: form.method
  })
  .then(response => {
    if (response.ok) toggleButtons();
  })
  .catch(error => console.error('提交失败:', error));
});

方案3：用localStorage保存前端状态 #

通过浏览器的localStorage保存按钮的显示状态，页面加载时读取并恢复状态。这种方案适合不需要后端同步状态的简单场景，但要注意多标签页或缓存清除会导致状态丢失。

修改后的JavaScript： #

// 页面加载时恢复之前保存的状态
window.addEventListener('load', function() {
  const savedState = localStorage.getItem('buttonState') || 'iniciar';
  const iniciarBtn = document.getElementById("iniciar");
  const pausarBtn = document.getElementById("pausar");
  
  if (savedState === 'pausar') {
    iniciarBtn.style.display = "none";
    pausarBtn.style.display = "block";
  } else {
    iniciarBtn.style.display = "block";
    pausarBtn.style.display = "none";
  }
});

function test() {
  const iniciarBtn = document.getElementById("iniciar");
  const pausarBtn = document.getElementById("pausar");
  let newState;
  
  if (iniciarBtn.style.display === "none") {
    iniciarBtn.style.display = "block";
    pausarBtn.style.display = "none";
    newState = 'iniciar';
  } else {
    iniciarBtn.style.display = "none";
    pausarBtn.style.display = "block";
    newState = 'pausar';
  }
  
  localStorage.setItem('buttonState', newState); // 保存状态到localStorage
}

额外优化点： #

原HTML中按钮存在重复的class属性（class="form"和class="btn btn-dark"），应该合并为class="form btn btn-dark"，避免DOM属性冲突。

内容的提问来源于stack exchange，提问作者user19270359