• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 701
  • Last Modified:

Change submit button image on click

I am using the below jquery code which on click of a form submit button it hides the submit button and shows a please wait button

$(function() {
 
  $("#please_wait").hide();
  $("#Send").click(function(){
    $("#Send").hide();
      $("#please_wait").show();
  });
        
  });


However I am also use spry validation on the form. If there is an error on the form I do not want my function to run. i.e. my submit button to hide

How do I solve this?

Let me know if you need the code for the spry validation?
0
petewinter
Asked:
petewinter
  • 2
  • 2
2 Solutions
 
RobOwner (Aidellio)Commented:
please provide the code for spry validation anyway.  In the past I've used http://docs.jquery.com/Plugins/Validation/validate#toptions for form validation that has a submitHandler function that is called when the form is valid.  That is where you would put your code.

eg

$(".selector").validate({
   submitHandler: function(form) {
 $("#please_wait").hide();
  $("#Send").click(function(){
    $("#Send").hide();
      $("#please_wait").show();
  });       // do other stuff for a valid form
   	form.submit();
   }
})

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Better to preventDefault on error than to call the submit
0
 
Michel PlungjanIT ExpertCommented:
Here is an untested example that you need to modify to your spry and form names situation

$(document).ready(function() {
  $("#FormID").submit(function(e) {
    var isValid = Spry.Widget.Form.validate(this);
    if (isValid) {
      $("#SubmitButtonID").hide();
      $("#PleaseWaitID").show();
    }
    else {
      $("#SubmitButtonID").show();
      $("#PleaseWaitID").hide();
      e.preventDefault(); // cancel submit
    }
  });
});
0
 
RobOwner (Aidellio)Commented:
Good point re preventDefault - makes absolutely sure that the form will not submit
0
 
petewinterAuthor Commented:
Many thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now