Reference Error when I call a function on click event for form Submit button

Question

I'm trying to submit a form to a server but it must first be validated by a function. However I keep getting a reference Error even though I declared the function. Also, when I click the button it will always submit even if I don't add the click attribute to the button.

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

Answer 1

Scope is everything! save function is defined inside .ready method so it will only be accessible there. You must declare this function outside that scope:

var onlineStatus = true;
var formObjects = null;

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

Reference Error when I call a function on click event for form Submit button

Question

1 answers

solution1
1 ACCPTED 2015-03-19 15:26:31

Reference Error when I call a function on click event for form Submit button

Question

1 answers

solution1 1 ACCPTED 2015-03-19 15:26:31

solution1
1 ACCPTED 2015-03-19 15:26:31