Question

I have this issue with my form that once its submitted, you will get an error message if you did not fill out any of the fields.
I want users have an option to have back the form after seeing the error message and have an option to refill it.
I feel like I could explain it clearly, check it yourself: http://www.insead4sq.com

                    <form method="post" action="default.asp?Process=add" id="SIGNUPFORM"><a href="#" name="signup"></a>
                        <fieldset>
                            <p>
                                <label>Name</label>
                                <input type="text" name="FIRSTNAME" id="FIRSTNAME" size="55" value="" />
                            </p>
                            <p>
                                <label>Surname</label>
                                <input type="text" name="LASTNAME" id="LASTNAME" size="55" value="" />
                            </p>
                            <p>
                                <label>Email Address</label>
                                <input type="text" name="EMAILADDRESS" id="EMAILADDRESS" size="55" value="" />
                            </p>
                            <p>
                                <label>Password</label>
                                <input type="password" name="PASSWORD" id="PASSWORD" size="55" value="" />
                            </p>
                            <p>
                                <label>Hometown</label>
                                <input type="text" name="CITY" id="CITY" size="55" value="" />
                            </p>
                            <p>
                                <input type="button" name="signup" value="Sign Up" class="submit" />
                            </p>
                        </fieldset>
                    </form>   

<script type="text/javascript">
$(document).ready(function() { 
    $("[name='signup']").click(function() { 
            $.ajax({
                type: "POST",
                data: $("#SIGNUPFORM").serialize(),
                url: "default.asp?Process=add", 
                success: function(output) { 
                $('#SIGNUPFORM').html(output)
                },
                error: function(output) {
                $('#SIGNUPFORM').html(output);
                }
            }); 
    }); 
    $(function update() {
        $.ajax({
            type: "GET",
            url: 'default.cs.asp?Process=TotalMembers',
            timeout: 2000,
            success: function(data) {
                $(".totalmembers").html(data);
                window.setTimeout(update, 5000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".totalmembers").html('.');
                window.setTimeout(update, 60000);
            }
        });
    });
}); 
</script>

Answer 1

Assuming on error you’re returning a textual error message, try this.

First of all, add a div to the page which is invisible on page load:

<div id="errorMessage" style="display: none"></div>

Then change your error handler to display the above div the error message in it, rather than removing your form:

error: function(output) {
    $('#errorMessage').html(output).show();
}