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.

Était-ce utile?

La 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...
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top