Question

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="number" 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.

Answer 1

Try this:

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