Simple jquery to test FORM's total Upload Size not working

[bxdobs]

Warning ... I am not a JAVA programmer so please be kind ... thanks for any help you can provide.
Retired bit basher looking for a bit of help with a non-profit project.

The code listed below was based on an online example that I found on js fiddle dot net ref 9bhcB 1220 relating to testing total attachment sizes on a web page.

Issue: WP 3rd party FORM with several Upload Fields, generated with VFB Pro Form plugin, ends with a blank screen if the submitted form's total size of all attachments exceeds the WP/PHP Upload LIMIT ... this LIMIT is in place to ensure EMAIL LIMITS aren't exceeded. As attachments are emailed for further processing, their size in total, shouldn't exceed an 8M email limit (while this limit seems to differ between providers, it has always worked for me)

While one could use individual field Size restrictions, as some upload fields are optional, was hoping for simplicity and ease of use to do a FORM level MAX file check instead.

VFB Pro defines CLASS vfb-fieldType-file-upload for its upload fields ... using a WP page, the following hidden JQuery is included in the HTML editor ... the script is supposed to sum all of the upload field sizes (denoted by class name) anytime there is a change to any of these fields ... the result valid should be false if totalSize exceeds 8M and is supposed to pop up an error message then disable the submit button ... nothing appears to happen when attaching a file or files that exceed the limit ... the Submit button ID is vfb-field-1234 ... not sure how to debug this ... wondering if this may be due to the document ready function not being coded properly

<pre hidden=""> 
 <script>
 $("document").ready(function() {
 $(".vfb-fieldType-file-upload").on('change', function() {
    var totalSize = 0;
    $(".vfb-fieldType-file-upload").each(function() {
      console.dir(this); 
      for (var i = 0; i < this.files.length; i++ {
        totalSize += this.files[i].size;
      }
     });
     var valid = totalSize <= 8192000;
     if (!valid)
      alert('Over MAX File Size');
     $("#vfb-field-1234").prop("disabled", !valid);
   }); 
});
 </script>
</pre>

In another instance where I used a jQuery with a VFB form, I used this variation of "ready" for setting up an ajax request

 var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
    jQuery('#rslt').html(this.responseText);

Wondering if this more explicit variation of ready is required?

Without dev tools, is there a way to debug these scripts?

Possibly some way to indicate the current progress of any part of the script using a debug message of some sort?

Again thanks in advance for any assistance you can provide

[bxdobs]

Update ... by adding a few console.log() statements I have determined by opening the Firefox console (CTRL-SHIFT J), that indeed the READY function is not being entered/called/run. So there must be something missing from this initial declaration.

[Dani]

Document shouldn’t be in quotes.

[bxdobs]

Thanks Dani, Quotes around Document have been removed ... still no joy ... tried adding $.noConflict(); per W3Schools ... again no joy ... still bashing away

[Dani]

Does the web browser’s JavaScript console log any errors?

[AndreRet]

There could be a few reasons why your code within the 'ready' function is not executing after removing the quote marks around 'document,

$(document).ready(function() {
//rest of your code...
});

Also ensure that your jQuery library is included before the script. If jQuery is not loaded, the '$' alias won't be recognized.

Your issue might not necessarily be within the ready function at all. There could be an error elsewhere that is preventing ypur function from executing like for instance - if other JavaScript libraries are used in conjunction with jQuery, conflicts might arise.

To debug, you could try the following -
Ensure that jQuery is properly loaded before this script - see more at How to Check if jQuery Is Loaded on a Page Using JavaScript

Check for any errors in your browser console that might be preventing the script from running.

Try running a very basic script within your 'ready' function to see if it executes - something like

x = 5;
y = 6;
z = x + y;

console.log z
//This should display 11 in your console...

If it does show 11 in your console, the issue might be within the rest of your code. If you paste some more code above and below your function related to the function we might be able to pick up on what exactly you are trying to achieve and note the error for you.

[bxdobs]

AndreRet ... with now being able to view the console.log, I did remove everything and slowly add lines to the code ... spent some time iterating through what worked and what didn't but sadly have fallen short of a solution. The error log is seemingly meaningless as it doesn't point to anything in this tiny script plus when a code snip works the same errors persist. Countless errors tagged with Grammarly

What I have gotten to work is recognizing that a Class Upload Field has changed and provides an Alert Popup
What I haven't gotten to work is

• changing the property of the Submit button ... tried referencing; Name, ID, or Class
• summing the file sizes ... can't seem to get the "for" logic to be recognized
• check mark a field in a radio button (not in the original listed code) ... there are 3 radio buttons, the checkmark logic works on the first 2 but not the 3rd

Seems that I can use the check mark as an immediate flag as to whether the script has been coded correctly ... without a check mark nothing works (indicating an error of some sort was encountered) when the check mark is there the code appears to work

[Christopher2004]

I see that you are having trouble with a jQuery script that is supposed to test the total upload size of a form. I searched the web for some possible solutions and found some relevant results that might help you.

One result is from a forum where someone posted a similar question and shared their code. The code uses the class name vfb-fieldType-file-upload to select the upload fields and summarize their sizes. The code also tries to display an error message and disable the submit button if the total size exceeds 8 MB. However, the code does not seem to work as expected.

Some possible reasons why the code is not working are:

• The code uses the jQuery function $(document).ready() to run the script when the document is loaded, but this might not be enough to ensure that the upload fields are ready as well. You might want to use a more specific selector or event to trigger the script, such as $(window).load() or $(document).on('change', '.vfb-fieldType-file-upload', function()).
• The code uses the property files[0].size to get the size of the file, but all browsers might not support this. You might want to use a more cross-browser compatible method, such as files.item(i).size or files[i].fileSize.
• The code uses the operator > to compare the total size with 8 MB, but this might not be accurate because the size is in bytes and 8 MB is equal to 8 1024 1024 bytes. You might want to use the exact value of 8 MB in bytes, which is 8388608, or convert the total size to MB by dividing it by 1024 * 1024.

Another result is from a website that explains how to validate the file size while uploading using JavaScript and jQuery. The website provides a step-by-step guide and a code example that shows how to listen for the change event on the input, check if any file is selected, get the size of the file, convert it to MB, and check if it follows the desired criteria. The website also provides a link to a demo where you can see the code in action.

You might want to check out these results and see if they can help you fix your code. If you need more help, you can also look at the other results I found. I hope this helps you with your coding problem. 😊

[john_111]

Have you started by including a link to the jquery library in the <head> of the html file?
PS javascript is not java, so not being a java programmer is not a problem.