在一个HTML表单中,我有一个复选框,根据用户之前的 Select ,哪个类是"隐藏"的或不是隐藏的.

这是我的HTML JavaScript代码,它创建了复选框

const cityBusesLabel = document.createElement('label');
cityBusesLabel.textContent = `Use of city buses`;
const cityBusesInput = document.createElement('input');
cityBusesInput.type = 'checkbox';
cityBusesInput.name = `cityBuses ${venueNumber}-${originCounter}`;
cityBusesInput.id = `cityBusesInput ${venueNumber}-${originCounter}`;
cityBusesInput.classList.add('hidden');
cityBusesLabel.id = `cityBusesLabel ${venueNumber}-${originCounter}`;
cityBusesLabel.classList.add('hidden');
cityBusesLabel.appendChild(cityBusesInput);

下面是显示/隐藏它的HTMLjavascript代码:

document.getElementById('venue_location_' + venueNumber).addEventListener('input', function() { 
    const select_value = document.getElementById('venue_location_' + venueNumber).value;
    if (select_value === 'suburban') {
        document.getElementById('cityBusesInput ' + venueNumber + '-' + originCounter).classList.remove('hidden');
        document.getElementById('cityBusesLabel ' + venueNumber + '-' + originCounter).classList.remove('hidden');
    } else {
        document.getElementById('cityBusesInput ' + venueNumber + '-' + originCounter).classList.add('hidden');
        document.getElementById('cityBusesLabel ' + venueNumber + '-' + originCounter).classList.add('hidden');
    }
});

现在,在使用Flask.py的app.py python代码中,我首先try 判断复选框是否隐藏,其次判断是否选中.

我试着写道:

cityBuses_checkbox = request.form.get(f'cityBuses {i}-{origin_counter}')
if cityBuses_checkbox :
    if cityBuses_checkbox == 'on' :
         city_buses.append(1)
    else :
         city_buses.append(0)

但它没有给我想要的输出.这两项判断是这样做的吗?

推荐答案

修改您的JavaScript,使其包含有关复选框是否隐藏以及是否在发送到服务器的请求中被选中的信息.

// Create hidden inputs to store the visibility and checked status
const cityBusesHiddenInput = document.createElement('input');
cityBusesHiddenInput.type = 'hidden';
cityBusesHiddenInput.name = `cityBusesHidden ${venueNumber}-${originCounter}`;
cityBusesHiddenInput.value = cityBusesInput.classList.contains('hidden') ? 'hidden' : 'visible';

const cityBusesCheckedInput = document.createElement('input');
cityBusesCheckedInput.type = 'hidden';
cityBusesCheckedInput.name = `cityBusesChecked ${venueNumber}-${originCounter}`;
cityBusesCheckedInput.value = cityBusesInput.checked ? 'checked' : 'unchecked';

// Append the hidden inputs to your form
// ... (append these inputs to the form element)

在服务器端,在您的Flaskapp中,您可以检索这些值并相应地处理它们.

from flask import request

# In your route handling function
cityBusesHidden = request.form.get(f'cityBusesHidden {i}-{origin_counter}')
cityBusesChecked = request.form.get(f'cityBusesChecked {i}-{origin_counter}')

if cityBusesHidden != 'hidden':
    if cityBusesChecked == 'checked':
        city_buses.append(1)
    else:
        city_buses.append(0)

Javascript相关问答推荐

序列查找器功能应用默认值而不是读取响应

jQuery提交按钮重新加载页面,即使在WordPress中使用preventDefault()

cypress中e2e测试上的Click()事件在Switch Element Plus组件上使用时不起作用

获取Uint8ClampedArray中像素数组的宽度/高度

加载背景图像时同步旋转不显示的问题

使用原型判断对象是否为类的实例

ChartJs未呈现

如何在Svelte中从一个codec函数中调用error()?

如何将zoom 变换应用到我的d3力有向图?

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

基于产品ID更新条带产品图像的JavaScript命中错误

如何使用Astro优化大图像?

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

用另一个带有类名的div包装元素

react 路由DOM有条件地呈现元素

Refine.dev从不同的表取多条记录

Rails 7:在不使用导入映射的情况下导入Java脚本

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0

打字脚本中的函数包装键入