swapping via jquery?

I have a button that i want a user to click and it turns into a spinner like this so what i was thinking was to have it like this...

<form method="post" id="new_resource" class="new_resource" action="/resources">
  <div class="field">
    <input type="text" size="30" name="resource[url]" id="resource_url">
    <input type="hidden" value="5" name="resource[course_id]" id="resource_course_id">
  </div>
  <div class="actions">
    <input type="submit" value="Create" name="commit" id="resource_submit">
  </div>
</form>

So what i need is if someone clicks on the submit form button with id="resource_submit that i would display a spinner...I was thinking of putting the spinner below this input tag in a span or an image tag but i wasnt sure the best way...

Here is my Jquery so far

$('form').submit(function(e){
 $(this).find('#resource_submit').hide();
 e.preventDefault();
});

I have multiple forms on the page so thats why i am using this appro开发者_Go百科ach but i dont know how to implement the spinner logic

I'm not sure what you're missing here, aside from a hidden image of an animated spinner.

CSS

.noShow{display:none;}

HTML

<img src="/images/spinner.gif" class="noShow" />

JS

$('form').submit(function(e){
    $(this).find('#resource_submit').hide();
    $(this).find('#spinnerImage').show();
});

put this html somewhere in your page:

<div id="spinner" style="display: none"><img src="spinner.gif" /></div>

then in your form submit function:

$('form').submit(function(e){
  $(this).find('#resource_submit').hide();
  $("#resource_url").after("#spinner");
  $("#spinner").show();
  e.preventDefault();
});