当js中的代码返回时，烧瓶表单提交不能停止
当字段careerHistory为null时，我希望停止表单提交。
我在我的js代码中有这个判断。
但是当字段careerHistory为null时，html表单仍然提交，实际上，当字段careerHistory为null时，我不想提交表单。
如何修正我的代码？
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>回答 1
Stack Overflow用户
发布于 2019-01-10 09:23:46
这更像是一个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) careerHistory input元素需要一个id或类名来选择带有jQuery的元素，就像设置单击处理程序时所做的那样。
<input id="careerHistory" ...>
$("#careerHistory")
2)在if语句中执行careerHistory === "undefined"操作。
undefined是javascript中的关键字，而不是字符串，所以它周围没有引号。
3)空字符串""和undefined都是假值。
if (!careerHistory)
是相同的
if (careerHistory===false || careerHistory===null || careerHistory==="" || careerHistory===undefined || careerHistory===0)
https://stackoverflow.com/questions/54125383
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号