Page 1 of 1

return false, prevent default not working

Posted: Fri Jun 29, 2012 7:13 am
by Pavilion
Hello folks:

I've a jQuery form.submit that works pretty well, but there is one problem.

Firstly - the purpose of this function is to
  1. Count file descriptions
  2. Test file description count against file count to make sure a description has been entered for every file.
  3. If the counts do not match, throw an error message, stop submission, and here's where the problem is DO NOT REFRESH THE PAGE... so the user can enter the needed descriptions


Following is my $('form').submit(function(e){

Code: Select all

$('form').submit(function(e){
			var desc_ct=-1;
			
			// count descriptions
			$('input.desc_input',this).each(function(){
				var v=$(this).val()
			// Following if block sets description count. Description count must be equal to file count before form can be submitted.
				if (!v) {
				desc_ct=desc_ct;				
				}
				else {
				desc_ct=desc_ct+1;
				}
			});		
			var_descCT=desc_ct;
			console.log("Description Count: " + var_descCT);
			console.log("File Count: " + Var_file_CT);
			
				// Now compare description count and file count. If they are not equal, throw an error message, return false and stop submission. 
				if (var_descCT !== Var_file_CT) {
					console.log("If error is running");
					$('.error').html("Please key in descriptions for ALL your files. Thank you.");
					return false;
					//$('[type=submit]',form).attr('disabled','disabled');
					//e.preventDefault();
				}
				// If the counts are equal... allow submit and show busyDiv - so user can see that the server is busy uploading.
				else
				{
				console.log("else is running");
				$('#busyDiv').css("display","inline");
				$(':file').css("display","none");
				$(':submit').css("display","none");		
				}						
	})
This block, in particular, is where the problem is:

Code: Select all

				// Now compare description count and file count. If they are not equal, throw an error message, return false and stop submission. 
				if (var_descCT !== Var_file_CT) {
					console.log("If error is running");
					$('.error').html("Please key in descriptions for ALL your files. Thank you.");
					return false;
					//$('[type=submit]',form).attr('disabled','disabled');
					//e.preventDefault();
				}
As you can see... I've tested
  • return false;
    $('[type=submit]',form).attr('disabled','disabled');
    e.preventDefault();
Now... the console.log shows "if error is running"... so this block is "in play".
Also... the NET tab in my console does NOT show a post, and files are NOT being dumped into my folder, so the actual post is being halted.
But... How can I stop the page from refreshing, so the user can enter the needed descriptions and hit submit again????

Any help with this problem would be greatly appreciated.

Thanks Much:

Pavilion

Re: return false, prevent default not working

Posted: Fri Jun 29, 2012 10:01 pm
by requinix
You were trying with preventDefault() before the return, right?

Re: return false, prevent default not working

Posted: Tue Jul 03, 2012 1:25 pm
by Pavilion
requinix wrote:You were trying with preventDefault() before the return, right?
Thanks requinix -

As it happens - I figured it all out. It was a matter of placement, but also a matter of my element being affected by some conflicts. Once I figured those things out, it all came together.

Thanks again, Pavilion