jQuery JSP Capture element being set after action of submit to change the CSS

Question

I have a JSP which has jQuery and wanted to change the action message CSS on successful submit.

So I have a page that a user enters info into, hits submit and then a span tag with the class actionMessage or actionError displays at the top of the page (After submit). Wanted to know if I could check for the element after page submit and add some CSS to make it display the way I would like it to.

<span class="actionMessage">Yeah all go!</span>

or

<span class="actionError">Try again I didn't like that :(</span>

Thanks

Answer 1

You can use the submit event to handle the form submission.

$("form").submit(function () {
  if (/* form_is_valid */) {
    $(".actionMessage").show();
    $(".actionError").hide();
    return true; // Send the request to the server.
  } else {
    $(".actionError").show();
    $(".actionMessage").hide();
    return false;  // Do not send the request.
  }
});

Your message elements should be hidden by default:

.actionMessage, .actionError {
  display: none;
}

If you don't want to send the request to the server even if the request is valid, you can return false from the submit event handler in this case too.