You are viewing limited content. For full access, please sign in.

Question

Question

File upload override JS and enables submit button

asked on July 26, 2016 Show version history

Hello,

I have a form that I have disabled the submit button until a list of check boxes are selected. I am having a few problems with my code and in need of some assistance:

1. The file upload feature enables the Submit button without any of the other criterias being met

2. The 'I agree' checkbox has to be the last box checked, or the submit button wont enable

3. After the submit button is enabled based on the checkboxes, if i uncheck one of the boxes, the submit button stays enabled

 

Code:

$(document).ready(function() {
 $('.Submit').attr("disabled","disabled")
 $('.Applicationchecklist').change(function () {
 
   
   if($('input[type=Checkbox][value=Owner_auth]:checked').length >0)
   if($('input[type=Checkbox][value=Pre-app]:checked').length >0)
   if($('input[type=Checkbox][value=Disclosure]:checked').length >0)
   if($('input[type=Checkbox][value=Agent_form]:checked').length >0)
   if($('input[type=Checkbox][value=Proj_Nar]:checked').length >0)
      $('.Legal').change(function () {
   if($('input[type=Checkbox][value=IAgree]:checked').length >0)
     
        {
            $('.Submit').removeAttr("disabled");
              
          }
     else
        {
            $('.Submit').attr("disabled","disabled");
              
          }

 
 
 });
 });
});

1 0

Answer

SELECTED ANSWER
replied on July 28, 2016

I tried this in version 10.1 and didn't find an issue with the file upload behavior.

I modified Xavier's code slightly to get this to work with the "I agree" checkbox and used the "disabled" attribute rather than show/hide.

$(document).ready(function() {
	$('.Submit').attr('disabled', true);
	$('.Applicationchecklist,.Legal').change(function(e) {
		var check1 = $('input[type=Checkbox][value=Owner_auth]').is(':checked');
   		var check2 = $('input[type=Checkbox][value=Pre-app]').is(':checked');
		var check3 = $('input[type=Checkbox][value=Disclosure]').is(':checked');
		var check4 = $('input[type=Checkbox][value=Agent_form]').is(':checked'); 
		var check5 = $('input[type=Checkbox][value=Proj_Nar]').is(':checked');     		
		var check6 = $('input[type=Checkbox][value=IAgree]').is(':checked');

   		if(check1 && check2 && check3 && check4 && check5 && check6) {
   			$('.Submit').attr('disabled', false);
   		} else {
   			$('.Submit').attr('disabled', true);
   		}
	});
});

It seems to work as intended.

2 0
replied on July 28, 2016

Is the submit button still disabled after you try uploading a document? Its not working on my end.

0 0
replied on July 28, 2016

No. If I check all the checkboxes and upload a document, the button becomes active. I'm using the Chrome browser. I also tried it in IE 11.

0 0
replied on July 28, 2016

Sheila,

Thank you for the edit, I've added your code to my process and it works for enabling/disabling the submit button based on any of the checkboxes so that awesome!!

The issue I'm still having is that if you dont touch any of the checkboxes and you select the upload button, once the file has been uploaded, the submit button will become enabled. This is a problem as i only want it to enable based on the checkboxes. I dont know if there is some predefined code from Laserfiche for the upload button that enables/activates the submit button.

Upload a file and see if your submit button is still disabled.

1 0
replied on August 3, 2016

Your answer resolves item 2 and 3 from my original question but unfortunately, the submit button is still enabled based on file upload. I've also tried the script below, but it doesn't work in making the submit button remain disabled upon upload.

Thank you Sheila for your help!

1 0

Replies

replied on July 26, 2016 Show version history

Hi Sherilee,

Here is a sample script to get you on the right path.  Try hiding the submit button instead of disabling. There is a script built into forms that is changing the btn state on file upload. I will update this if I find a workaround.

$(document).ready(function() {
	$('.Submit').hide();
	$('.Applicationchecklist').change(function(e) {
		var check1 = $('input[type=Checkbox][value=Owner_auth]').is(':checked');
   		var check2 = $('input[type=Checkbox][value=Pre-app]').is(':checked');
		var check3 = $('input[type=Checkbox][value=Disclosure]').is(':checked');
		var check4 = $('input[type=Checkbox][value=Agent_form]').is(':checked'); 
		var check5 = $('input[type=Checkbox][value=Proj_Nar]').is(':checked');     		
		var check6 = $('input[type=Checkbox][value=IAgree]').is(':checked')); 		
   		
   		if(check1 && check2 && check3 && check4 && check5 && check6) {
   			$('.Submit').show();
   		} else {
   			$('.Submit').hide();
   		}
	});
});

 

1 0
replied on July 28, 2016

I'm not sure why mine's working and yours isn't. Maybe you could change your code a bit, creating a function out of the var definitions and if statement, add a class to your Upload button (i.e. attach-doc), and call that function when any of the checkboxes change and when the upload button is clicked:

$(document).ready(function() {
  
	$('.Submit').attr('disabled', true);
	$('.Applicationchecklist,.Legal').change(valForm);
  	$('.attach-doc input.fileuploader').click(valForm);
    
  function valForm(e) {
		var check1 = $('input[type=Checkbox][value=Owner_auth]').is(':checked');
   		var check2 = $('input[type=Checkbox][value=Pre-app]').is(':checked');
		var check3 = $('input[type=Checkbox][value=Disclosure]').is(':checked');
		var check4 = $('input[type=Checkbox][value=Agent_form]').is(':checked'); 
		var check5 = $('input[type=Checkbox][value=Proj_Nar]').is(':checked');
    	var check6 = $('input[type=Checkbox][value=IAgree]').is(':checked');
    
   		if(check1 && check2 && check3 && check4 && check5 && check6) {
   			$('.Submit').attr('disabled', false);
   		} else {
   			$('.Submit').attr('disabled', true);
   		}
    }
});

And if that still doesn't work because the Submit button is disabled at some point after clicking the Upload button, you can use a "setTimeout" on the function call when triggered by the Upload button (I set it for 2 seconds below):

$('.attach-doc input.fileuploader').click(function() {
		setTimeout(valForm, 2000);
});

It's just a thought. I'd test it, but I'm not experiencing the same issue you are.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.