asked on

Form submit from dialog

I have a site and its exclusively for members, when a page is accessed if the cookie is set then they are allowed in, if not i have a modal dialog that displays a form and asks for their password, the form has one field "password", the dialog has 2 buttons, "Log Me In" and "Cancel"
i have no problems with any of that...what i can't seem to do is tie up the "Log Me In" button to submitting the form to my php page _checkpassword.php
Any and all help would be appreciated

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Home Page</title>
	<link rel="stylesheet" href="http://code.jquery.c<wbr ></wbr>om/ui/1.10<wbr ></wbr>.3/themes/<wbr ></wbr>smoothness<wbr ></wbr>/jquery-ui<wbr ></wbr>.css" />
	<script src="http://code.jquery.co<wbr ></wbr>m/jquery-1<wbr ></wbr>.9.1.js"><<wbr ></wbr>/script>
	<script src="http://code.jquery.co<wbr ></wbr>m/ui/1.10.<wbr ></wbr>3/jquery-u<wbr ></wbr>i.js"></sc<wbr ></wbr>ript>
<style>
body { font-size: 80%; }
input.text { margin-bottom:12px; width:65%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>
<script>
$(function() {
	$( "#passwordform" ).dialog({
	autoOpen: true,
	height: 300,
	width: 350,
	modal: true,
	buttons: {
		"Log Me In": function() {
			$("loginform").submit(func<wbr ></wbr>tion() { 
				var mydata = $("loginform").serialize()<wbr ></wbr>;
				alert(mydata); // test
				 $.ajax({
					type: "POST",
					url: "_checkpassword.php",
					data: mydata,
					success: function(response, textStatus, xhr) {
						alert("success"); //test
					},
					error: function(xhr, textStatus, errorThrown) {
						alert("error"); //test
					}
				});
				return false;
			});
			$( this ).dialog( "close" );
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
	}
});
});
</script>
</head>
<body>
<div id="passwordform" title="Password Required">
	<p>Please enter your password.</p>
	<form id="loginform" name="loginform">
		<fieldset>
			<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>
<div>Page html here</div>
</body>
</html>

Open in new window

Also I would like that once the password is validate by the php script, that the contents of the dialog either display an error message and asking to try again,
or if the info was correct have it display "welcome <name extracted from db>" and an ok button to close out dialog...
is this even possible?....still a relatively newbie to jquery....
thx

Jagadishwor Dulal

Your dialog is appearing only you have problem is there is <wbr ></wbr> tags inside your code. Open your favorite editor and replace them. Your code should be like:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Home Page</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font-size: 80%; }
input.text { margin-bottom:12px; width:65%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>
<script>
$(function() {
	$( "#passwordform" ).dialog({
	autoOpen: true,
	height: 300,
	width: 350,
	modal: true,
	buttons: {
		"Log Me In": function() {
			$("loginform").submit(function() { 
				var mydata = $("loginform").serialize();
				alert(mydata); // test
				 $.ajax({
					type: "POST",
					url: "_checkpassword.php",
					data: mydata,
					success: function(response, textStatus, xhr) {
						alert("success"); //test
					},
					error: function(xhr, textStatus, errorThrown) {
						alert("error"); //test
					}
				});
				return false;
			});
			$( this ).dialog( "close" );
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
	}
});
});
</script>
</head>
<body>
<div id="passwordform" title="Password Required">
	<p>Please enter your password.</p>
	<form id="loginform" name="loginform">
		<fieldset>
			<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>
<div>Page html here</div>
</body>
</html>

Open in new window

If you need code for _checkpassword.php write here.

Jagadishwor Dulal

And one solution as you need is here:
http://www.bitrepository.com/ajax-login-modal-box.html

Chris Stanyon

You're not selecting your form correctly. An ID selector starts with the hash so it should be $('#loginform'). Something like this:

$("#loginform").submit(function() { 
     var mydata = $("#loginform").serialize();

Open in new window

Chris Stanyon

Also, you don't have a submit button in your form, so you don't need to do it the way you are. You have a Log Me In button, so you need to set that to send the data to your form using ajax:

$("#passwordform").dialog({
	autoOpen: true,
	height: 300,
	width: 350,
	modal: true,
	buttons: {
		"Log Me In": function() {
			var mydata = $("#loginform").serialize();
			alert(mydata);

	 		$.ajax({
				type: "POST",
				url: "_checkpassword.php",
				data: mydata,
				success: function(response, textStatus, xhr) {
					alert("success");
				},
				error: function(xhr, textStatus, errorThrown) {
					alert("error");
				}
			});
			$( this ).dialog( "close" );
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
	}
});

Open in new window

leozayas

ASKER

yes thank you chris what i did was capture the "log Me In" click event and then send the val of the password field to the php file.....

the part i am working on now and kinda stuck is sending information back to the dialog based on correct entry or incorrect entry....

thx so much gain

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leozayas

ASKER

thank you chris that's it exactly.....

leozayas

ASKER

now i can get the response whether echoed or json back in the dialog correct?

Chris Stanyon

Yeah - the output of the PHP script will be sent back to your AJAX call - either as a single value or a JSON object. You can then do whatever you like with that info.

//Alert a value
alert(response.name);

//Set the content of a DIV to a returned value
$('#someDiv').html(response.name);

//Check a returned value and act accordingly:
if (response.loggedin) {
alert("Logged in successfully");
} else {
alert("Incorrect Password: Please Try Again!!");
}

leozayas

ASKER

awesome thank you sir