Question

I have a form, if submitted correctly, it hides the form.

I added a cancel button, to close the pop-up thickbox window, but when I hit cancel, it hides the form.

How do I go about hiding the form if the login button is selected?

$(document).ready(function() {
    $("#login_form").submit(function() {
        var unameval = $("#username").val();
        var pwordval = $("#password").val();
        $.post("backend.php", { username: unameval, 
        password: pwordval }, function(data) {
            if(data === "ok") {
                $('#login_form').remove();
                $("#success p").html(data);
          } else {
                $("#success p").html(data);
          }
        });
        return false;
    });
});

<form id="login_form" method="post">
    <p>Username: <input type="text" id="username" name="username" /></p>
    <p>Password: <input type="password" id="password" name="password" /></p>
    <p><input type="submit" name="login" value="Login" /> <input type="submit" name="cancel" value="Cancel" /></p>
</form>

Also, how do I go about closing the window by selecting the cancel button? I’d like to close the window and auto-refresh the parent window.

Answer 1

Try using the button input type, instead of the submit type, here is an example…

In place of..

<input type="submit" name="cancel" value="Cancel" />

Use…

<input type="button" onclick="$('#thickbox-selector').remove()" />

I don’t know how to properly close a thickbox (there might be a close() method or something), but you get the idea :P.