Something strange is happening when I click submit...

[TeddyKiller]

How can I explain this?

I have 2 onclick events, and.. well, it's explanatory in the code below.

 

I have forms inside of the divs that get displayed via onclicks. If I complete a form.. Close the div (onclick event again, same thing) and then open it, or even open the other div.. it closes it.. It's like im clicking twice, only i'm clicking once.. it just slidesDown, and slidesUp.

 

The code for that is..

    // Changing the pass onsite
    $("#passonsite").click(function() {
        if ($("#passonsiteDiv").is(":hidden"))
        {
            $("#passonsiteDiv").slideDown("slow");
            if ($("#passonemailDiv").is(":visible")) $("#passonemailDiv").slideUp("slow");
        }
        else
        {
            $("#passonsiteDiv").slideUp("slow");
        }
    });
    // Changing the pass by email
    $("#passonemail").click(function() {
        if ($("#passonemailDiv").is(":hidden"))
        {
            $("#passonemailDiv").slideDown("slow");
            if ($("#passonsiteDiv").is(":visible")) $("#passonsiteDiv").slideUp("slow");
        }
        else
        {
            $("#passonemailDiv").slideUp("slow");
        }
    });

 

When I complete a form, it goes through something like this..

    // onEmailForm Submit
    $("#onEmailSubmit").click(function() {
        $.ajax({type: "POST",
            url: "modules/forgotPassword/forgotPassword.php",
            data: {state: "1", email: $("#onEmailEmail").val()},
            cache: false,
            success: function(html){
                $("#onEmailMessage").html(html);
                $("#onEmailMessage").slideDown("slow");
            }
        });
        return false;
    });

 

So I'm wondering why it .. stops the div opening and closing working properly, instead just opening it and closing it together with just one click.

 

If I haven't clicked submit on any of the forms.. it works as it should do. Opens with one click, closes with the other.

 

Has anyone else got this issue? How can I fix it?

 

Cheers!

[TeddyKiller]

Any ideas on this?

I an't seem to figure it out.

[XeNoMoRpH1030]

This seems like a tough one to troubleshoot. Can you recreate it in jsFiddle?

[F1Fan]

Where's the rest of your code? Show the HTML with the form and the submit button.

[TeddyKiller]

Theres alot of ajax, but i'll only post one form. (All forms run the same)

// JavaScript Document
$(function() {
// Changing the pass onsite
$("#passonsite").click(function() {
	if ($("#passonsiteDiv").is(":hidden"))
	{
		$("#passonsiteDiv").slideDown("slow");
		if ($("#passonemailDiv").is(":visible")) $("#passonemailDiv").slideUp("slow");
	}
	else
	{
		$("#passonsiteDiv").slideUp("slow");
	}
});
// Changing the pass by email
$("#passonemail").click(function() {
	if ($("#passonemailDiv").is(":hidden"))
	{
		$("#passonemailDiv").slideDown("slow");
		if ($("#passonsiteDiv").is(":visible")) $("#passonsiteDiv").slideUp("slow");
	}
	else
	{
		$("#passonemailDiv").slideUp("slow");
	}
});
// Continue the onSiteForm
$("#onSiteContinue").click(function() {
	$.ajax({type: "POST",
		url: "modules/forgotPassword/forgotPassword.php",
		data: {state: "3", email: $("#onSiteEmail").val()},
		cache: false,
		success: function(html){
			$("#continueForm").slideUp("slow");
			$("#finishForm").html(html);
			$("#finishForm").slideDown("slow");
		}
	});
	return false;
    });
// onEmailForm Submit
$("#onEmailSubmit").click(function() {
	$.ajax({type: "POST",
		url: "modules/forgotPassword/forgotPassword.php",
		data: {state: "1", email: $("#onEmailEmail").val()},
		cache: false,
		success: function(html){
			$("#onEmailMessage").html(html);
			$("#onEmailMessage").slideDown("slow");
		}
	});
	return false;
    });

// onEmailForm for Change Pass
$("#changePass").click(function() {
	$.ajax({
		type: "POST",
		url: "modules/forgotPassword/forgotPassword.php",
		data: {state: "2", pass: $("#newPass").val(), confirmPass: $("#confirmPass").val(), email: $("#changePassEmail").val()},
		cache: false,
		success: function(html){
			$("#changePassMessage").html(html);
			$("#changePassMessage").slideDown("slow");
		}
	});
	return false;
    });

$("#changeCancel").click(function(){
	$("#finishForm").slideUp("slow");
	$("#continueForm").slideDown("slow");

	return false;
});

$("#tryAgain").click(function(){
	$("#finishForm").slideUp("slow");
	$("#continueForm").slideDown("slow");

	return false;
});

// onSiteForm Submit
$("#onSiteSubmit").click(function() {
	$.ajax({type: "POST",
		url: "modules/forgotPassword/forgotPassword.php",
		data: {state: "4", pass: $("#onSitePass").val(), confirmPass: $("#onSiteConfirmPass").val(), answer: $("#onSiteAnswer").val(), email: $("#onSiteEmail1").val()},
		cache: false,
		success: function(html){
			$("#onSiteMessage").html(html);
			$("#onSiteMessage").slideDown("slow");
		}
	});
	return false;
    });
});

 

            		<form action="" method="post">
					<table style="margin:0 auto;">
                    		<tr>
                        		<td style="text-align:right;">Email:</td>
                        	    <td style="text-align:left;"><input type="text" id="onEmailEmail" size="30" /></td>
                       		</tr>
                        
						<tr>
                        		<td></td>
                        	    <td><input type="submit" id="onEmailSubmit" class="button" value="Submit" /></td>
                        	</tr>
					</table>
           			</form>

 

Sorry its messy. I've actually removed this now and kept it less complicated.. but I would like to find out the problem so I could use this method in future.

[F1Fan]

Try changing your input "submit" to type "button". Maybe you're actually submitting the page as well.