How to run a Javascript/Jquery Function using both $(document).ready(function() and Another Event Function?

Question

I'm not a javascript/jquery coder, and not sure if what I'm trying to do is possible.

I have a html/php/ajax form that is updated an sql database as the user fills it out. As they fill the form, there is a progress bar ran by javascript/jquery that updates as the user types in the input. The start of the function looks like this:

$("#update input").keyup(function() {

This works great. My problem is when the page is reloaded. My code is pulling sql data from the database to fill the value of every input on the page that has a value so that a user can come back and completely the form later. When the user reloads the page, the only way for the script to activate is if the user types in an input field.

I thought I would fix the issue by changing the my initial javascript/jquery function with $(document).ready(function() . This caused the script to only run when the page was loaded and not when the form was being filled out. I need both the script to run on page ready, and when a user is typing in the input filled. Is there a way I can run both $(document).ready(function() AND $("#update input").keyup(function() { simultaneously? Or is there a better why to accomplish this? Thanks!

Let me know if I need to post more code.

Sorry, I need to update that... the script wont run. with the document ready function, it only runs once and is over. But it does what I want it to do when the page loads. With the keyup function, it works while the user is typing in an input, but when using this, when the page is reloaded one has to type in a input field for the script to update across the page. — JCBiggar, Mar 12 '21 at 13:36
If you want to execute the same function in multiple events, you can declare a function, and pass a reference to that function when attaching the event instead of defining an anonymous function. — Teemu, Mar 12 '21 at 13:39
No one needs to see how my scripts are working in order to answer if its possible to run two document events at once. My script is working fine. It's the function initiative that isn't working, which I provided in my question..... Teemu, I think your suggestion will work! — JCBiggar, Mar 12 '21 at 13:49
You can also trigger() the event as well after you assign the listener — charlietfl, Mar 12 '21 at 13:51
You can't run anything simultaneuosly in JS, excluding workers, those can't access the DOM, though. — Teemu, Mar 12 '21 at 13:53
`function myStuff() { // your code }; $(function() { myStuff(); }; $('#update input').on('keyup', myStuff);` — melancia, Mar 12 '21 at 13:58
Does this answer your question? [jQuery multiple events to trigger the same function](https://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function) — melancia, Mar 12 '21 at 13:59
@Teemu, go ahead and add an answer and I'll mark it as correct! It worked great! Thanks! — JCBiggar, Mar 12 '21 at 13:59
Thanks everyone for the input! Teemu's suggestion to declare a function and pass a reference to the function when attaching an event worked great! — JCBiggar, Mar 12 '21 at 14:01

Teemu · Accepted Answer · 2021-03-12T14:29:10.617

Here's a generic approach attaching declared functions to events.

function handler (e) {}
element.addEventListener('click', handler);

You're free to call handler everywhere, also inside $(document).ready, or if there's no other code in your DOMReady handler, you can just pass a reference as an argument:

$(document).ready(handler);

In your specific case you most likely want something like this:

$(document).ready(function () {
  function handler (e) {...}
  handler();
  $("#update input").keyup(handler);
});

If the handler function uses the event object (e in the example), in modern browsers it's also available as a global event object, or in jQuery, e.originalEvent. The object doesn't exist if there's no event fired, though, in that case you've to pass a fake event object, containing the provided properties, to the handler, if it is needed.

How to run a Javascript/Jquery Function using both $(document).ready(function() and Another Event Function?

1 Answers1