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 :)

Barrie Reader · Accepted Answer · 2011-07-25 10:35:28Z

5

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/ *

edited Jul 25, 2011 at 10:35

answered Jul 25, 2011 at 10:21

Barrie Reader

10.7k11 gold badges77 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jackJoe Over a year ago

I agree, otherwise you have no way to tell if it was successful. Unless you posted it and via a query show the message. Anyway, you can use the $(".class").show(), this will show the hidden element.

Barrie Reader Over a year ago

You could point it to itself, get the headers in the PHP file to handle the query (whatever that may be) and return your data... It would be easier to manage if it was a seperate file, but it's all down to how you want it to work... I'd use one file to rule them all... :/

brett Over a year ago

Er, so would that mean: url: "theDestinationFile.php", //the file you are posting to> url: "contact_3rev.php", //the file you are posting to (as this is the page its on)

Robert · Accepted Answer · 2011-07-25 10:25:01Z

1

You have to follow these steps:

Validate form
If form is not valid, then show relevant messages and cancel submit operation
If form is valid, then submit the form
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.

answered Jul 25, 2011 at 10:25

Robert

213 bronze badges

2 Comments

brett Over a year ago

Thats a nice explanation, I currently have the jquery validate and I have the PHP validate So I get successful form submissions and I can echo the results back with isset. but I need to hide stuff > Like the form and unhide other stuff like the thank you message.

brett Over a year ago

Here is a link to the testing space: www.bgv.co.za/testspace/contact_3rev.php

Collectives™ on Stack Overflow

jQuery Change element class on form submit

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related