• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

Submit form via jQuery

Im trying to post some form data from one page to another (simple), however in my form which retrives the form data says there is no data coming through, however it is being called.

To try and debug I put the line 'alert($("#frmLogin").serialize());' to hopefully see the data going across, but it just gives me nothing.

			<div style="width:300px; text-align:left;">
				<form action="/" id="frmLogin" action="POST">
				<div style="width:150px; float:left;"><input type="text" id="txtUsername" name="txtUsername" /></div>
				<div style="width:150px; float:left;"><input type="password" id="txtPassword" name="txtPassword" /></div>
				<div style="width:300px; float:left; text-align:center;">
					<div id="divLoginMessage" style="width:300px; float:left; text-align:centre;"></div>
					<div style="width:50px; float:left;"></div>
					<div id="btnLogin" style="width:200px; float:left; text-align:center; background-color:#C8C8C8; cursor:pointer;" onClick="Javascript:attemptLogin();">Login</div>
						
						<script type="text/javascript">
							function attemptLogin() {
								if ($("#btnLogin").text() == "Login")
									{
									$("#txtUsername").attr("disabled", "disabled");
									$("#txtPassword").attr("disabled", "disabled"); 
									$("#btnLogin").text("Logging in....");
									alert($("#frmLogin").serialize());
									$.post("attemptLogin.php", $("#frmLogin").serialize(), 
									function(data) {
										if (data.substring(0,15) == "Login Succeeded")
											{
											window.location.href = "loggedIn.php?AuthID=" + data.substring(16)
											}
										else
											{
											$("#divLoginMessage").html(data);
											$("#txtUsername").removeAttr("disabled");
											$("#txtPassword").removeAttr("disabled"); 
											$("#btnLogin").text("Login");											
											}										
									});
									}
							}
						</script>
					<div style="width:50px; float:left;"></div>
				</div>
				</form>
			</div>

Open in new window


Any ideas what Im doing wrong?
0
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Because disabled field are not serialized
disable them after the $.post (don't worry, it's an asynchronous ajax call so th code don't wait the end of the ajax call before disable the fields)

test page : http://jsfiddle.net/3aBd4/

0
 
leakim971PluritechnicianCommented:
or save the serialized string before disable the fields : http://jsfiddle.net/3aBd4/1/

<div style="width:300px; text-align:left;">
                <form action="/" id="frmLogin" action="POST">
                <div style="width:150px; float:left;"><input type="text" id="txtUsername" name="txtUsername" /></div>
                <div style="width:150px; float:left;"><input type="password" id="txtPassword" name="txtPassword" /></div>
                <div style="width:300px; float:left; text-align:center;">
                    <div id="divLoginMessage" style="width:300px; float:left; text-align:centre;"></div>
                    <div style="width:50px; float:left;"></div>
                    <div id="btnLogin" style="width:200px; float:left; text-align:center; background-color:#C8C8C8; cursor:pointer;" onClick="Javascript:attemptLogin();">Login</div>
                        
                        <script type="text/javascript">
                            function attemptLogin() {
                                if ($("#btnLogin").text() == "Login")
                                    {
                                    $("#btnLogin").text("Logging in....");
                                    var dd = $("#frmLogin").serialize();
                                    $("#txtUsername").attr("disabled", "disabled");
                                    $("#txtPassword").attr("disabled", "disabled"); 
                                    alert(dd);
                                    $.post("attemptLogin.php", dd, 
                                    function(data) {
                                        if (data.substring(0,15) == "Login Succeeded")
                                            {
                                            window.location.href = "loggedIn.php?AuthID=" + data.substring(16)
                                            }
                                        else
                                            {
                                            $("#divLoginMessage").html(data);
                                            $("#txtUsername").removeAttr("disabled");
                                            $("#txtPassword").removeAttr("disabled"); 
                                            $("#btnLogin").text("Login");                                            
                                            }                                        
                                    });
                                    }
                            }
                        </script>
                    <div style="width:50px; float:left;"></div>
                </div>
                </form>
            </div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now