ho visto quest form di login vibrante vibra con i dati sbagliati ma quando ho provato a farla in locale ma non vibra perchè?
posto il codice
script.js
codice php
metto anche la css
posto il codice
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login shaker - Script.aculo.us</title>
<script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="javascript/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/stile.css" media='screen' />
</head>
<body>
<form method="post" action="javascript:void(0);" onsubmit="formSubmit(); return false;" id='shakeForm'>
<div id='shakeBox'>
<fieldset>
<legend>Login Box:</legend>
<div id='msgBox' style="display:none;"></div>
<label>Username: <input type="text" value="ht" name="username" maxlength="30" /> <input type="submit" value="login" name="loginSubmit" /></label><br />
<label>Password: <input type="password" value="ht" name="pw" maxlength="20" /></label>
</fieldset>
</div>
</form>
</body>
</html>
HTML:
function formSubmit()
{
new Ajax.Request("php/check.php",{parameters: $('shakeForm').serialize(true),
onComplete:function(transport){
var json=transport.responseText.evalJSON(true);
if(!json.stato)
{
$('msgBox').addClassName('ko');
Effect.Shake('shakeBox');
}
else
{
if($('msgBox').hasClassName('ko'))
$('msgBox').removeClassName('ko');
}
$('msgBox').innerHTML=json.msg;
Effect.Appear('msgBox');
}
});
}
PHP:
<?php
/**
* Controllo i dati che mi arrivano dalla form
* il controllo non avverrà tramite DB
*/
if($_POST['pw']=='html' && $_POST['username']=='html')
{
echo json_encode(array("msg"=> "Login effettuato correttamente!",
"stato" => true));
}
else
{
echo json_encode(array("msg"=> "Login errato!",
"stato" => false));
}metto anche la css
HTML:
#shakeBox
{
width:300px;
margin:0 auto;
padding:0;
}
#msgBox
{
font-family:Verdana;
font-size:10px;
color:#fff;
margin:5px 0;
padding:0 3px;
background-color:#83c55e;
}
#msgBox.ko
{
background-color:#ee2424;
}
#shakeForm fieldset
{
border:1px dotted #666;
font-family:Verdana;
font-size:10px;
font-weight:bold;
}
#shakeForm label
{
font-family:Verdana;
font-size:10px;
color:#666;
display:block;
}
#shakeForm label input
{
font-family:Verdana;
font-size:10px;
color:#666;
}
Ultima modifica:
