Tijden veranderen
inlogform
Ik heb een inlogform gedownload dat gebruik maakt van jquery.
AAnvankelijk kon ik niet inloggen, maar na veel speurwerk ben ik erachter gekomen dat het aan 1 regel ligt:
Code (php)
1
<div id="form_wrapper" class="form_wrapper">
Als ik hier de id="form_wrapper" eruit haal en alleen de class laat staan doet kan ik WEL inloggen.
Het javascript dat hierbij hoort is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
});
</script>
Mijn inlogform ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form class="login active" action="process.php" method="POST">
<!-- Login-->
<div>
<label>Username:</label>
<input type="text" name="user" value="<?php echo $form->value("user"); ?>"><?php echo $form->error("user"); ?>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
<input type="password" name="pass" value="<?php echo $form->value("pass"); ?>"><?php echo $form->error("pass"); ?>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" name="remember"<?php if($form->value("remember") != ""){ echo "checked"; } ?><span>Keep me logged in</span></div>
<input type="hidden" name="sublogin" value="">
<input type="submit" value="Login"></input>
<a href="register.php" rel="register" class="linkform">You don't have an account yet? Register here</a>
<div class="clear"></div>
</div>
</form>
<!-- Login-->
<div>
<label>Username:</label>
<input type="text" name="user" value="<?php echo $form->value("user"); ?>"><?php echo $form->error("user"); ?>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
<input type="password" name="pass" value="<?php echo $form->value("pass"); ?>"><?php echo $form->error("pass"); ?>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" name="remember"<?php if($form->value("remember") != ""){ echo "checked"; } ?><span>Keep me logged in</span></div>
<input type="hidden" name="sublogin" value="">
<input type="submit" value="Login"></input>
<a href="register.php" rel="register" class="linkform">You don't have an account yet? Register here</a>
<div class="clear"></div>
</div>
</form>
Deze form is getest en werkt prima, maar alleen door de
Code (php)
1
<div id="form_wrapper" class="form_wrapper">
te vervangen door:
Code (php)
1
<div class="form_wrapper">
Als ik dit doe, kan ik dus WEL inloggen maar verlies ik de jquery functionaliteit.
Waar moet ik dit probleem zoeken?
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
je script werkt oke, maar je moet wel zorgen dat de javascript je form ook ergens heenstuurd, anders blijft. e.preventdefault over en gebeurt er niets.
Als je op submit klikt, moet er contact gemaakt worden met process.php
hoe pas ik dat aan? ik heb weinig verstand van javascript
Toevoeging op 09/11/2012 16:12:46:
ik heb het zelf al functionerende gekregen
Code (php)
1
2
3
2
3
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.process.php();
.click(function(e){
e.process.php();
Hij werkt nu!
Hartstikke bedankt, ik had dat niet in de gaten dat de demo de submit disabled had