防止表单提交无效
[英]Form submission prevention not working
问题描述
So I read here: https://api.jquery.com/submit/ that I can do this 
所以我在这里阅读： https : //api.jquery.com/submit/我可以做到这一点
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
in order to prevent the form to be submitted when the submit button is clicked. 为了防止单击提交按钮时提交表单。 However, for whatever reason it is not working and I have no idea why. 但是，无论出于什么原因，它都不起作用，我也不知道为什么。 I tried to delete everything except for two inputs and tried pressing the submit button but it still didn't alert me. 我试图删除除两个输入以外的所有内容，并尝试按“提交”按钮，但它仍然没有提醒我。 Anybody know how to fix this? 有人知道如何解决这个问题吗？ Here is the rest of my code: 这是我其余的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
</script>
<body>
<div>
<h1 id="header" align="center"> </h1>
</div>
<div id="wrapper1">
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">About Website</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Friends</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Reader</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">The People</a>
<h1 class="infoText" style="display:none"></h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">Sign Up</a>
<div id="wrapper2" style="display:none">
<form id="validationForm">
<input class="infoPlaceholder" name="firstName" placeholder="First Name"/>
<input class="infoPlaceholder" name="lastName" id="addRightMargin" placeholder="Last Name"/>
<input class="infoPlaceholder" name="email" placeholder="Email"/>
<input class="infoPlaceholder" name="city" placeholder="City"/>
<input class="infoPlaceholder" name="state" placeholder="State"/>
<p></p>
<div id="wrapper3">
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="elderlyButton" href="javascript:void(0);">Elderly</a>
<div class="eacQuestion" id="elderlyText" style="display:none">How many elderly?</div>
<div>
<input class="countBoxes" id="elderlyBox" style="display:none" name="elderlyCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="adultButton" href="javascript:void(0);">Adults</a>
<div class="eacQuestion"id="adultText" style="display:none">How many adults?</div>
<div>
<input class="countBoxes" id="adultBox" style="display:none" name="adultsCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="childrenButton" href="javascript:void(0);">Children</a>
<div class="eacQuestion" id="childrenText" style="display:none">How many children?</div>
<div>
<input class="countBoxes" id="childrenBox" style="display:none" name="childrenCount" placeholder="#"/>
</div>
</div>
</div>
<div style="float:left">
<textarea class="comments" name='comment' id='comment' placeholder="Comments"></textarea>
</div>
<div style="float:right" id="hvr-float">
<input type="submit" id="submitButton" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</body>
I know my code is like super nasty... This is my first website that I am building. 我知道我的代码超级讨厌...这是我正在建立的第一个网站。 Please help! 请帮忙！ I am so lost! 我很迷路！
2 个解决方案
解决方案1
4 2015-09-22 05:22:10
Put your code within $( document ).ready() handler 将您的代码放入$（document）.ready（）处理程序中
$(document).ready(function(){
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
});
A page can't be manipulated safely until the document is "ready."
解决方案2
2 2015-09-22 05:22:36
This can be seen from your code that the code is in head element. 从您的代码可以看出，该代码位于head元素中。 So, when the page is loaded the script is executed when the form is not yet available in the DOM . 因此，在加载页面时，当DOM中尚不存在表单时，将执行脚本。 To wait for the DOM to finish loading, you can use ready . 要等待DOM完成加载，可以使用ready 。
So, you need to use ready 所以，您需要使用ready
$(document).ready(function () {
$("#validationForm").submit(function (event) {
event.preventDefault();
alert('test');
});
});
Or, you can also move the script at the end of body . 或者，您也可以在body的末尾移动脚本 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.