hide input[type=submit] and show loading image not working

using jquery, i am trying to hide the submit button and show an ajax loading gif once it is clicked.

it is working fine, but the form does not get submitted anymore.

heres my jquery code:

$('input[type=submit]').click(function () {
    $(this).parent('p').html('<img src="images/ajax-loader.gif" alt="loading" />');
    $(this).parent('form').submit();
});

heres my html:

<h1>add</h1>

<form method="post" action="form.php">

<p>
<label for="number">number:</label>
<input type="text" name="number" id="n开发者_如何学Pythonumber" size="30" value="" />
</p>

<p style="text-align: center;">
<input type="submit" value="add" />
</p>

</form>

as you can see, i even added $(this).parent('form').submit(); and it still doesn't work.

Try this:

$('form').submit(function() {
    $('p:last-child', this).html('<img src="images/ajax-loader.gif" alt="loading" />');
});