jQuery Change element class on form submit

Question

I've been woking at this for a while and just getting nowhere. So please help I'm sure its a simple thing.

I have a form, using PHP and Jquery. When you submit the form I would like for a Thank you header to display > its currently hidden. The form can only be submitted on successful validation - I'm using validator.

The important thing here is for me to find out how to change classes on a succesful submit. So element that are display: none in my CSS can be revealed.

Your help is appreciated :)

Answer 1

Without checking if the submit is successful, you could do this...

$('#form').submit(function() {

  $('#ele').removeClass('whatever').addClass('whatever');

});

You'd be better off using ajax() or get()

Here's an ajax() example:

$.ajax({
  url: "theDestinationFile.php", //the file you are posting to
  dataType: 'xml', //or json, string etc
  success: function(data) { //success!
    alert("Success: " + data);
  },
  error: function(data) { //error
    alert("error: "+data);
  }
});

*And some jQuery documentation for you: http://api.jquery.com/jQuery.ajax/ *

Answer 2

You have to follow these steps:

1. Validate form
2. If form is not valid, then show relevant messages and cancel submit operation
3. If form is valid, then submit the form
4. Show the message

Now, if you want to post the page back to the server (synchronous post back) then you should make the message element visible at server side and hide the form. But if you use AJAX, you can create a success callback and in that, you can change the visibility of your message element.