How can I prevent this jQuery function from being executed on every page load?

StackOverflow https://stackoverflow.com/questions/17335308

  •  01-06-2022
  •  | 
  •  

Question

I believe I have a solution to my problem, but I want to be sure. This is what I have:

<html>...
<body>...

 <script type="text/javascript" src="../JS/jquery.js"></script>
 <script type="text/javascript" src="../JS/respond.min.js"></script>
 <script type="text/javascript" src="../JS/jquery.min.js"></script>
 <script type="text/javascript" src="../JS/validate.js"></script>
 <script type="text/javascript" src="../JS/jQueryCalls.js"></script>
 ...

<form name="login-form" class="login-form" method="post" onSubmit="login()">

  <div class="header">
    <h1>Sign In</h1>
  </div>

  <div class="content">
    <input type="hidden" name="siteToken" value="$token" />
    <input id="username" name="username" type="text" class="input username"  placeholder="Username" required="required" />

  <div class="user-icon"></div>
    <input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />

  <div class="pass-icon"></div>

  </div>

  <div class="footer">
    <input type="submit" name="submit" value="Login" class="button" />
  </div>
</form>

Now onSubmit links to a jQuery function is an external file, jQueryCalls.js. This is the function:

$(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");
    };

});

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:

$(document).ready(function login() {
  $('.login-form').submit(function() {
   var formData = $(this).serialize();
   .post('whatever', formData,...

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 onSubmit, 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 php file need to be in the same directory as the jQuery function? Any input is appreciated.

Was it helpful?

Solution

The key is here:

$(function login() {
});

Remember that jQuery is not a different language - it's just javascript with some helper functions already defined. So you're calling the $() function, and passing in a function as an argument. The fact that you're naming the function is irrelevant - it's still getting passed as a parameter to $().

When you call the $() or jQuery() function and pass in another function, it's a shortcut for defining a document-ready event handler. So your code is really the same as doing this:

$(document).ready(function() {
    var formData = $('#login-form').serialize();
    $("input").prop("disabled", true);
    // the rest of your function here...
});

...which causes it to run on every page load.

If you're just defining a function that will be called later, there's no reason to wrap it in $(). You can define your function like this instead:

function login() {
    var formData = $('#login-form').serialize();
    $("input").prop("disabled", true);
    // the rest of your function here...
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top