title: How can I prevent this jQuery function from being executed on every page load?
body: <p>I believe I have a solution to my problem, but I want to be sure. This is what I have:</p>
  
  <pre><code>&lt;html&gt;...
  &lt;body&gt;...
  
   &lt;script type="text/javascript" src="../JS/jquery.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="../JS/respond.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="../JS/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="../JS/validate.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="../JS/jQueryCalls.js"&gt;&lt;/script&gt;
   ...
  
  &lt;form name="login-form" class="login-form" method="post" onSubmit="login()"&gt;
  
    &lt;div class="header"&gt;
      &lt;h1&gt;Sign In&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="content"&gt;
      &lt;input type="hidden" name="siteToken" value="$token" /&gt;
      &lt;input id="username" name="username" type="text" class="input username"  placeholder="Username" required="required" /&gt;
  
    &lt;div class="user-icon"&gt;&lt;/div&gt;
      &lt;input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" /&gt;
  
    &lt;div class="pass-icon"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="footer"&gt;
      &lt;input type="submit" name="submit" value="Login" class="button" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now <code>onSubmit</code> links to a jQuery function is an external file, jQueryCalls.js. This is the function:</p>
  
  <pre><code>$(function login() {
      var formData = $('#login-form').serialize(); //Grab all submission data from login form
      $("input").prop("disabled", true); //Disable inputs for the duration of the post
  
      var request = $.post('E:\Additional Programs\xampp\htdocs\Vista_Ridge_Territory_System\PHP\Scripts\VRC_LoginProcess.php', formData, loginMessage);
  
      //Handle server-side response
      function loginMessage(data) {
          $('.header').append("nada");
      };
  
  });
  </code></pre>
  
  <p>Every time the page loads, this function is executed - obviously that creates an issue since I disable inputs. My assumption is that I can fix the problem with something like this:</p>
  
  <pre><code>$(document).ready(function login() {
    $('.login-form').submit(function() {
     var formData = $(this).serialize();
     .post('whatever', formData,...
  </code></pre>
  
  <p>I am curious as to whether anyone has any insight on this, and why it is being executed on each page load? Specifically, do I need to modify form action attribute, different implementation on <code>onSubmit</code>, etc? I assume that the browser is simply seeing the file and executing the containing functions. Also, I am receiving a cross origin error in chrome console. Does the <code>php</code> file need to be in the same directory as the jQuery function? Any input is appreciated. </p>