Support » Plugin: Contact Form 7 » Add progressbar fails

  • Hi,
    I’m new here and need some help with the file upload proccess/progressbar.
    I have successfully added the progressbar with(in scripts.js):

    		$.ajax( {
    			type: 'POST',
    			url: wpcf7.apiSettings.getRoute(
    				'/contact-forms/' + wpcf7.getId( $form ) + '/feedback' ),
    			data: formData,
    			dataType: 'json',
    			processData: false,
    			contentType: false,
    			// Start       
    			beforeSend: function() { 
    			progressbox.slideDown(); //show progressbar
    			progressbar.width(completed); //initial value 0% of progressbar
    			statustxt.html(completed); //set status text
    			statustxt.css('color','#000'); //initial color of status text
    			xhr: function() {
           		var xhr = new window.XMLHttpRequest();
    				xhr.upload.addEventListener("progress", function(event) {
    					if (event.lengthComputable) {
    						var percentComplete = Math.round((event.loaded * 100) /;
    						progressbar.width(percentComplete + '%') //update progressbar percent complete
    						statustxt.html(percentComplete + '%'); //update status text  
    						if(percentComplete>50) {
    							statustxt.css('color','#fff'); //change status text to white after 50% 
    			   }, false);
    			   return xhr;
    		} ).done( function( data, status, xhr ) {
    			ajaxSuccess( data, status, xhr, $form );
    			$( '.ajax-loader', $form ).removeClass( 'is-active' );
    			myform.resetForm();  // reset form
    			submitbutton.removeAttr('disabled'); //enable submit button
    			progressbox.slideUp(); // hide progressbar

    The problem I have now is that the progressbar is displayed even if not all required fields are filled in. The complete file is uploaded and then the error message appears. How can I check the required fields first and then display the progress bar when all fields are filled in?

    • This topic was modified 8 months, 2 weeks ago by kubus1234.

    The page I need help with: [log in to see the link]

  • The topic ‘Add progressbar fails’ is closed to new replies.