时间戳

首页 > 解决方案 > 当js中的代码返回时，Flask表单提交无法停止

javascript - 当js中的代码返回时，Flask表单提交无法停止

问题描述

careerHistory当字段为空时，我想停止表单提交。

我的js代码中有这个判断。

但是当该字段careerHistory为空时，html表单仍然提交，实际上，当该字段careerHistory为空时，我不想提交表单。

如何修复我的代码？

HTML & Javascript：

<html>
    <head>
        <title>cal</title>
        <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/FlaskModelCalculation.css" rel="stylesheet" type="text/css"/>
        <script src="static/js/jquery-1.11.3.min.js"></script>
        <script src="static/js/toastr.min.js"></script>
        <script type="text/javascript">
        $(function () {
              $('#calculate').click(function(){
              var careerHistory = $("#careerHistory").val();
              alert(careerHistory);
              if(careerHistory=="" || careerHistory==="undefined"){
                    alert("careerHistory cann't null");
                    return;//Here I don't want to to submit the form,because the careerHistory is null.But the request was sent.
                 }
              });
        });
    </script>


    </head>
    <body>
        <div align="center" style="margin-top:60px">
            <form name="form1" method='POST'>
                    <span>careerHistory</span><input type="text" placeholder="careerHistory" name="careerHistory" id="careerHistory" class="form-control" value="{{careerHistory}}"><br/>
                    <span>wholeBookNumber</span><input type="text" placeholder="wholeBookNumber" name="wholeBookNumber"  class="form-control" value="{{wholeBookNumber}}"><br/>
                    <span>reflectionBookNumber</span><input type="text" placeholder="reflectionBookNumber" name="reflectionBookNumber"  class="form-control" value="{{reflectionBookNumber}}"><br/>
                    <span>schoolClassificationCD</span><input type="text" placeholder="schoolClassificationCD" name="schoolClassificationCD" class="form-control" value="{{schoolClassificationCD}}"><br/>
                    <span>jobsNumber</span><input type="text" placeholder="jobsNumber" name="jobsNumber"  class="form-control" value="{{jobsNumber}}"><br/>
                    <span>constructionSpecificity</span><input type="text" placeholder="constructionSpecificity" name="constructionSpecificity"  class="form-control" value="{{constructionSpecificity}}"><br/>
                    <span>playingStyle</span><input type="text" placeholder="playingStyle" name="playingStyle"  class="form-control" value="{{playingStyle}}"><br/>
                    <span>workingMethod</span><input type="text" placeholder="workingMethod" name="workingMethod"  class="form-control" value="{{workingMethod}}"><br/>
                    <span>workOvertimeAverage</span><input type="text" placeholder="workOvertimeAverage" name="workOvertimeAverage"  class="form-control" value="{{workOvertimeAverage}}"><br/>
                    <input type="submit" id="calculate" class="btn btnNormal btn-primary" value="cal">
                    <input type="text"  name="calculationResult" readonly="readonly" class="form-control" value="{{calculationResult}}">
            </form>
        </div>
    </body>
    <footer>
    </footer>
</html>

标签： javascript

解决方案

这更像是一个 javascript 问题，而不是 Python 问题。

您可以使用阻止表单提交preventDefault

$(function () {
  // pass the event object as 'evt' to the callback
  $('#calculate').click(function(evt){
    var careerHistory = $("#careerHistory").val();
    if(!careerHistory) {
      // prevent form submission
      evt.preventDefault();
    }
  });
});

您必须首先解决的问题

1) careerHistoryinput元素需要一个 id 或类名来使用 jQuery 选择元素，就像您在设置点击处理程序时所做的那样。
<input id="careerHistory" ...>
$("#careerHistory")

2）你careerHistory === "undefined"在你的if语句中做。
undefined是 javascript 中的关键字，而不是字符串，因此没有引号。

3) 空字符串""并且undefined都是假值。

if (!careerHistory)
是相同的
if (careerHistory===false || careerHistory===null || careerHistory==="" || careerHistory===undefined || careerHistory===0)

推荐阅读