Listmates,

I'm using javascript in conjunction with jquery to validate that fields have been filled in with information. Works wonderful.

However, when the user hit's the save button there are couple of actions that is taken in javascript.

function processing() {
	$('.saveeditbuttons').hide();
	var thisdiv = '.processingmsg';
	$(thisdiv).css({ "position": "absolute", "top": "170px", left: ($(window).width() - $(thisdiv).outerWidth())/2, });
	Move = $(thisdiv).detach()
	$('body').append(Move);			
	$(thisdiv).show();
	$("form").submit();
}

I am hiding the save/edit buttons then showing the working GIF.

I'm using jquery.validate.min.js to validate that mandatory fields are filled in. If not, then return back to the form.

The problem I'm having is the "working.gif" is still showing itself and the save edit buttons are not visible.

Any ideas how to get the form to a) turn of the gif and b) reshow the save/edit buttons.

Thanks in advance.

So if it works you submit which reloads the form - so that should just work. If it doesn't work then you need to basically reverse all those changes with showing the animated gif and buttons etc.

Ideally create a function:

function validating(reset) {

  if (!reset) {
     // hide buttons, show gif
  }
  else {
     // show buttons, hide gif
  }
}

and then call that function at the appropriate moments.

FWIW, for this sort of thing VueJs works very nice as you can store your field model data and easily set various states and affect behavior just by setting a few properties on your model.

Another tip: Rather than an animated Gif use a FontAwesome icon:

<a class="fa fa-circle-notch-o fa-spin"></i>

Should look like this:

and gives you a spinning icon.

Thanks Rick for the help.