Javascript 表单提交预防不起作用_Javascript_Jquery_Html_Forms

Javascript 表单提交预防不起作用

javascript jquery html forms

Javascript 表单提交预防不起作用,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,所以我在这里读到：我能做到这一点 $("#validationForm").submit(function(event) { event.preventDefault(); alert('test'); }); 以防止在单击提交按钮时提交表单。然而，无论出于什么原因，它都不起作用，我也不知道为什么。我试图删除除两个输入之外的所有内容，并尝试按下提交按钮，但它仍然没有提醒我。有人知道怎么解决这个问题吗？以下是我的代码的其余部分： <script src="https://

所以我在这里读到：我能做到这一点

$("#validationForm").submit(function(event) {
    event.preventDefault(); 
    alert('test');
});

以防止在单击提交按钮时提交表单。然而，无论出于什么原因，它都不起作用，我也不知道为什么。我试图删除除两个输入之外的所有内容，并尝试按下提交按钮，但它仍然没有提醒我。有人知道怎么解决这个问题吗？以下是我的代码的其余部分：

<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>


$（“#验证表单”）.submit（函数（事件）{
event.preventDefault（）；
警报（“测试”）；
});
正文
正文
正文

有多少老人？
有多少成年人？
有多少孩子？

我知道我的代码非常糟糕。。。这是我的第一个网站，我正在建设。请帮忙！我太迷路了

将代码放入处理程序中

$(document).ready(function(){
    $("#validationForm").submit(function(event) {
        event.preventDefault(); 
        alert('test');
    });
});

在文档“就绪”之前，页面无法安全操作。jQuery会为您检测这种就绪状态。$（document）.ready（）中包含的代码只有在页面文档对象模型（DOM）准备好让JavaScript代码执行后才会运行。$（window）.load（function（）{…}）中包含的代码将在整个页面（图像或iframe）而不仅仅是DOM就绪后运行。（摘自：）

将代码放入处理程序中

$(document).ready(function(){
    $("#validationForm").submit(function(event) {
        event.preventDefault(); 
        alert('test');
    });
});

从代码中可以看出，代码位于

head

元素中。因此，当加载页面时，当表单在DOM中还不可用时，将执行脚本。要等待DOM完成加载，可以使用

ready

因此，您需要使用

ready

$(document).ready(function () {
    $("#validationForm").submit(function (event) {
        event.preventDefault();
        alert('test');
    });
});

或者，您也可以移动
正文

末尾的脚本。这可以从您的代码中看出，代码位于

头

元素中。因此，当加载页面时，当表单在DOM中还不可用时，将执行脚本。要等待DOM完成加载，可以使用

ready

因此，您需要使用

ready

$(document).ready(function () {
    $("#validationForm").submit(function (event) {
        event.preventDefault();
        alert('test');
    });
});

或者，您也可以移动
正文

末尾的脚本，这不是问题的原因，但元素ID必须是唯一的。加载多个版本的jQuery可能会产生不利影响：这不是问题的原因，但元素ID必须是唯一的。加载多个版本的jQuery可能会产生不利影响，如：widdle:@JaeKim:lay to help you:）@JaeKim:lay to help you:）您可能会发现有帮助您可能也会发现有帮助