Question

我正在开发一个Flask应用程序，我在一些HTML输入中有所需的标记，但它们似乎无法正常工作。

应用程序的基础是，基于选择选项选择，显示不同的输入集合，而其他输入则隐藏。以下是一些代码，虽然我遗漏了很多，因为有很多，我觉得这是所有相关的，但我可能是错的。目前，除了对某些HTML输入使用“required”之外，所有功能都有效。可能导致这种情况的原因是什么？

HTML

<form id="observations" method="post" action="/Page" onsubmit="SubForm()">
  <div class="form-group row">
  *Some other inputs up here*
    <div class="form-group row" id="facts1" style="display:none;">
      <div class="form-group row" >
        <label class="col-sm-5 col-lg-5 col-md-5 form-control-label">fact_a* </label>
        <div class="col-sm-4 col-lg-4 col-md-4">
          <input class="form-control" name="fact_a" type="number" step="any" value= {{ fact_a }} required>
        </div>
      </div>
    </div>
   <div class="form-group row">
      <div class="col-sm-4 col-lg-4 col-md-4 col-xs-4 col-sm-offset-2 col-lg-offset-2 col-md-offset-2 col-xs-offset-2" >
         <input type="submit" name="submit" value="Submit" class="btn btn-success btn-lg">
       </div>
     </div>
</form>

关联的Javascript是：

 <!--  Shows different fields depending on which Facts type is input-->
     $('#myselect').on('change',function(){
    if( $(this).val()==="facts1"){
    $("#facts1").show()
    }
    else{
    $("#facts1").hide()
    }
    if( $(this).val()==="facts2"){
    $("#facts2").show()
    }
    else{
    $("#facts2").hide()
    }

function SubForm(){
         var facts1 = document.getElementById('facts1');
         var facts2 = document.getElementById('facts2');

        if (facts1.style.display == 'none') {
           // Get the parent of the facts1 node, then use it to remove its child facts1
           facts1.parentNode.removeChild(facts1);
        }
        if (facts2.style.display == 'none') {
           // Get the parent of the facts2 node, then use it to remove its child facts2
           facts2.parentNode.removeChild(facts2);
        }
     }

使用subForm函数，以便我的HTML（未显示）中的另一个div，fact2，如果没有显示，则删除它的输入不会被提交给Flask并进入字典

其他相关信息：我在此页面上有第二个表单，其中还有一个输入type =“submit”，用于提交上传的csv文件，以便csv文件的内容通过以下方式填充到我的HTML输入中jinga2。

Answer 1

确保您所在的浏览器支持所需的标记。大多数人都这样做，但我遇到过一些没有
这一行：

<input class="form-control" name="fact_a" type="number" step="any" value= {{ fact_a }} required>

渲染时，需要围绕值的双引号，因此可能需要如下所示： <input class="form-control" name="fact_a" type="number" step="any" value="{{ fact_a }}" required>

HTML输入工作所必需的

1 个答案: