javascript - 当我在表单提交按钮的单击事件上调用函数时引用错误

标签 javascript jquery html forms

我正在尝试向服务器提交表单,但它必须首先由函数验证。然而,即使我声明了该函数,我仍然收到引用错误。另外,当我单击按钮时,即使我没有向按钮添加 click 属性,它也始终会提交。

<html id="website" class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>        
    <script src="js/main.js"></script>

    <script>
        jQuery(document).ready(function($){

            var onlineStatus = true;
            var formObjects = null;

            //Local Storage or Send to Server
            function save(){

                if(onlineStatus == false){

                    formObjects = $('#form').serializeObject();
                    alert("saving to local: " + formObjects);
                    alert(formObjects.length);

                } else{
                    alert("submitting!!");
                    $("#form").submit();
                }
            }

        });             
    </script>
</head>
<body>

<form id="form" role="form" method="post" action="https://www.webserver.com/echo.php">
<div id="form1" class="container">
    <h1>Personal Information</h1>
       <div class="form-group">
          <label for="name">Name</label>
          <input id="name" name="name" type="text" required
             placeholder="Enter Name">
       </div>
       <div class="form-group">
          <label for="email">E-mail:</label>
          <input id="email" name="email" type="email" required
             placeholder="E-mail">
       </div>

   <button id="submitButton" class="btn btn-default" onclick="save();return false;" >Submit</button>

</div> 
</form>  

</body>

最佳答案

范围就是一切! save 函数在 .ready 方法中定义,因此只能在该方法中访问。您必须在该范围之外声明此函数:

var onlineStatus = true;
var formObjects = null;

//Local Storage or Send to Server
function save(){
//stuff here
}
jQuery(document).ready(function($){

关于javascript - 当我在表单提交按钮的单击事件上调用函数时引用错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29148499/

相关文章:

javascript - 函数仅在调用它的最新元素上运行

javascript - 如何使用 JQuery 动态地将文本加载到段落中

html - 将 Bootstrap 导航栏定位在顶部下方 100 像素,以便为 Logo 腾出空间

javascript - 表单验证,对特定值进行异常处理

javascript - 根据<select>动态更改<label>的文本

javascript - react sibling 的通信,只能访问 parent

javascript - Chrome 扩展程序安装错误消息

javascript - 根据 JavaScript 中的属性值从对象数组中选择

javascript - 如何从 json stringify 数组获取所需的输出

jQuery 悬停多次触发。没有一种解决方案有帮助