<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch β</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import
"themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({});
$(function(){
$('body').bind('pageAnimationEnd', function(event, info){
//alert($('#Success')[0].innerHTML);
if ($('#Success') && $('#Success')[0].innerHTML=='Success'){
$(location).attr('href','http://www.jqtouch.com/');
}
});
});
</script>
<style type="text/css" media="screen">
body.fullscreen #home .info {
display: none;
}
</style>
</head>
<body>
<form id="myform" action="jqtform.php" method="POST" class="form">
<div class="toolbar">
<h1>Log in</h1>
</div>
<ul class="rounded">
<li><input type="text" name="username" value="" placeholder="Username" /></li>
<li><input type="password" name="password" value="" placeholder="Password"
/></li>
</ul>
<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit
whiteButton">Submit</a>
</form>
</body>
</html>
Second file, jqtform.php:
<?php
$title = "Wrong username or password";
if ($_POST["username"] && $_POST["password"]) {
if ($_POST["username"] =="jqtouch" && $_POST["password"] == "jqtouch") {
$title = "Success";
}
}
?>
<div>
<form id="myform" action="jqtform.php" method="POST" class="form">
<div class="toolbar">
<h1><?php echo $title ?></h1>
</div>
<ul class="rounded">
<li><input type="text" name="username" value="" placeholder="Username" /></li>
<li><input type="password" name="password" value="" placeholder="Password"
/></li>
</ul>
<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit
whiteButton">Submit</a>
</form>
<?php if ($title == "Success"){ ?>
<div id="Success">Success</div>
<?php } ?>
</div>
3 comments:
Hey, thanks for this post. Can you explain your work a bit?
What exactly does your script do in the html file?
Why do you have the form in both the html and php files?
JQTouch uses AJAX to submit a form and then appends the HTML response from the server to the current web page in a new DIV. It then animated to this new DIV and hides the original form. Hence the need for the 2 forms. This example works by looking for specific embedded text in the response HTML and then redirecting the page on success. I hope that helps.
I'm having a really hard time just submitting a form in JQTouch. I'm doing a basic post form to a page which POSTS the data and then spits a response. So I need an identical form and an extra DIV? I must be missing something, my submit button doesn't take me to the action url.. I have class=form..
Post a Comment