e.preventDefault() met GET values
Ik heb forms voor login en registratie op dezelde pagina waarbij je met een animatie kan switchen tussen die twee.
Bij het switchen krijgt een van die forms een class active.
Maar door e.preventDefault() toegepast op de 'switcher link' kan ik geen get values in de url toevoegen.
Voorbeeld.
De eerste form die je te zien krijgt is de login form en die is active op de form heb je 'switcher link':
Code (php)
1
<a href="login.php?f=register" rel="register" class="linkform">Nog geen account? Registreer hier</a>
Alleen nu gaat de get value f verloren en kan ik voor PHPserver niet bepalen welke active is.
En door e.preventDefault() weg te halen werkt de animatie niet meer.
Een tip?
Code (php)
1
2
3
4
2
3
4
<!-- login form -->
<input type="hidden" name="form_type" value="login" >
<!-- registratie form -->
<input type="hidden" name="form_type" value="register" >
<input type="hidden" name="form_type" value="login" >
<!-- registratie form -->
<input type="hidden" name="form_type" value="register" >
dan in PHP:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Toevoeging op 02/01/2014 12:54:09:
laat die formulieren eens zien?
Bepalen welke form ik moet afhandelen of register of login is geen probleem want dat kan ik ook bepalen
met de submit knop door voor register en login beide een andere name te geven.
i.e
Code (php)
1
<input type="submit" value="Register" name="register" />
Ik bedoel meer dat je begint bij login die heeft als eerste de class active.
Maar als je dan op de link "Geen account klik hier om te registreren" klikt krijg je een overgangs animatie naar de registratie form.
En dit heb ik niet goed uitgelegd, het probleem is, als ik refresh of submit op de registratie form dat het dan weer springt naar de login pagina. Dus ik moet op de 'switcherlink' een get value meegeven zodat ik de class active MET php kan manipuleren
Een functie waar je e.preventDefault() gebruikt.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$linkform.bind('click',function(e){
var $link = jQuery(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();
});
var $link = jQuery(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();
});
is dat die <a href="login.php?f=register" rel="register" ...> ?
--
Je wil dus die rel="register" lezen van die <a>.
Wat moet dan gebeuren met die "register"? Hoe wil je die in de url krijgen?
(een beetje anticiperend)
Je weet: als de url veranderd wordt, wordt de pagina verlaten, en begint alle javascript opnieuw.
Behalve: je mag aan het einde van een url een # zetten, met gelijk welke string daarna. Dit zorgt niet voor een verversing van de pagina.
Dit is ideaal wanneer je javascript toestanden in de url wil steken.
Met e.preventDefault(); blijft die op de pagina en dat is goed anders werkt inderdaad de javascript voor de overgangs animatie niet en dat is goed hij hoort ook opzelde pagina te blijven.
Als ik naar de registratie form ga, moet hij naar: login.php?f=register gaan in plaat daar van gaat hij naar login.php dit geeft problemen voor de submit en browser refresh op de register pagina.
Hoe kan ik nou toch zorgen dat die op de registratie pagina blijft ondanks e.preventDefault()
Mij idee was ik geef op de link een get value mee <a href="login.php?f=register" ...</a> zodat ik in php kan zeggen
Francoi gckx op 02/01/2014 13:39:56:
... Als ik naar de registratie form ga, moet hij naar: login.php?f=register gaan in plaat daar van gaat hij naar login.php ...
Hoe gebeurt dat?
Waar/hoe wordt de gebruiker doorgestuurd naar login.php?
De functie die je postte doet de animate en de add active ...
Wie zorgt er voor de doorverwijzing?
Een aanpassing van code die ik boven al heb gegeven
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$linkform.bind('click',function(e){
var $link = jQuery(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);
});
});
document.cookie= $('form').attr('class');
e.preventDefault();
});
var $link = jQuery(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);
});
});
document.cookie= $('form').attr('class');
e.preventDefault();
});
Hoe kom ik nu in PHP terecht om de cookie uit te lezen
@Kris Je moet begrijpen login.php bevat drie forms in een: 'login, register, en wachtwoord vergeten'
De 'login' form is wat je als eerst te zien krijgt op de login.php pagina van daaruit kan je switchen naar de 'register' form. Dus de 'login' form heeft altijd de class='active' hardcoded. Als je naar de 'register' form gaat krijgt de 'register' form via javascript de class='active' en de 'login' form niet meer.
Alleen PHP begrijpt dat niet voor PHP is 'login' form nog steeds 'active' dit geeft problemen bij submit en refreshen van de 'register' form
toevoeging op de laatste zin: en dus gaat hij terug naar de 'login' form
Gewijzigd op 02/01/2014 14:07:36 door Francoi gckx
Code (php)
1
document.cookie= 'form='+$('form').attr('class');
En dan in php kan je die uitlezen via:
Code (php)
1
2
3
2
3
<?php
$_COOKIE['form'];
?>
$_COOKIE['form'];
?>
Gewijzigd op 02/01/2014 16:34:23 door Erwin H
Hij gaat nu niet meer naar de registratie form als ik op de link klikt, geen idee waarom niet.
Voordat je daar op in gaat kan jij hier iets mee
Code (php)
1
2
3
4
2
3
4
$form_wrapper.find('input[type="submit"]')
.click(function(e){
return false;
});
.click(function(e){
return false;
});
Alleen als ik op de submit knop klikt verwerkt php de code weer niet
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
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
...
......
...
$linkform.bind('click',function(e){
var $link = jQuery(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);
});
});
document.cookie= 'form='$('form').attr('class');
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
$entrycontent.css({
height : $entrycontent.height() + $currentForm.data('height') + 100 + 'px'
});
}
$form_wrapper.find('input[type="submit"]')
.click(function(e){
return false;
});
jQuery('#btn-bedrijf').click(function() {
jQuery("#bedrijf_fields").slideToggle("fast")
return false;
});
});
......
...
$linkform.bind('click',function(e){
var $link = jQuery(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);
});
});
document.cookie= 'form='$('form').attr('class');
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
$entrycontent.css({
height : $entrycontent.height() + $currentForm.data('height') + 100 + 'px'
});
}
$form_wrapper.find('input[type="submit"]')
.click(function(e){
return false;
});
jQuery('#btn-bedrijf').click(function() {
jQuery("#bedrijf_fields").slideToggle("fast")
return false;
});
});
Toevoeging op 02/01/2014 17:19:01:
MET document.cookie= 'form='$('form').attr('class'); blokkeert heel de code javascipt (waarschijnlijk) en kom ik niet naar de registratie formulier
MET
Code (php)
1
2
3
4
2
3
4
$form_wrapper.find('input[type="submit"]')
.click(function(e){
return false;
});
.click(function(e){
return false;
});
Blijft die op de registratie form maar verwerkt PHP de gegevens niet
Ik zal zo de html form zelf geven
Toevoeging op 02/01/2014 17:22:06:
Dit is een gedeelte en het hele form van login voor de registratieform is het ongeveer hetzelfde qua structuur alleen zonder de class active hardcoded
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
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
<form class="login
active" method="post" action="">
<h3>Login</h3>
<?php
if(empty($errors) === false)
{
echo '<div class="field-box"><span class="errors">', implode('<br />', $errors), '</span></div>';
}
?>
<div>
<label>Gebruikersnaam:</label>
<input type="text" name="username" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>" />
<span class="error"></span>
</div>
<div>
<label>Wachtwoord: <a href="login.php" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
</div>
<div>
<input type="password" name="password" />
<span class="error"></span>
</div>
<div class="end_forms">
<div class="bottom_edited">
<div class="remember"><input type="checkbox" /><span>Hou mij ingelogd</span></div>
<input type="submit" value="Login" name="login"></input>
<a href="login.php?f=register" rel="register" class="linkform">Nog geen account? Registreer hier</a></div>
</div>
</form>
active" method="post" action="">
<h3>Login</h3>
<?php
if(empty($errors) === false)
{
echo '<div class="field-box"><span class="errors">', implode('<br />', $errors), '</span></div>';
}
?>
<div>
<label>Gebruikersnaam:</label>
<input type="text" name="username" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>" />
<span class="error"></span>
</div>
<div>
<label>Wachtwoord: <a href="login.php" rel="forgot_password" class="forgot linkform">Wachtwoord vergeten?</a></label>
</div>
<div>
<input type="password" name="password" />
<span class="error"></span>
</div>
<div class="end_forms">
<div class="bottom_edited">
<div class="remember"><input type="checkbox" /><span>Hou mij ingelogd</span></div>
<input type="submit" value="Login" name="login"></input>
<a href="login.php?f=register" rel="register" class="linkform">Nog geen account? Registreer hier</a></div>
</div>
</form>
Code (php)
1
2
3
2
3
document.cookie= 'form='$('form').attr('class');
//moet zijn:
document.cookie= 'form='+$('form').attr('class');
//moet zijn:
document.cookie= 'form='+$('form').attr('class');
Verder heb je in datzelfde stuk een probleem met de jquery selector (denk ik), want je hebt eerder gezegd dat je meerdere forms in hetzelfde document heb zitten. Hier selecteer je op alleen de form tag, dus worden alle forms geselecteerd. Je wil alleen het form hebben waarvan op de button is geklikt (lijkt mij...).
En waarom deze click handler, wat wil je hiermee bereiken?
Code (php)
1
2
3
2
3
$form_wrapper.find('input[type="submit"]').click(function(e){
return false;
});
return false;
});
Code (php)
1
2
3
4
5
6
2
3
4
5
6
document.cookie= 'factive='+jQuery('form').attr('class');
if(empty($_COOKIE['factive']) === false)
{
echo $_COOKIE['factive'];
}
if(empty($_COOKIE['factive']) === false)
{
echo $_COOKIE['factive'];
}
geeft Undefined
Toevoeging op 02/01/2014 17:35:27:
(Ik ben op het moment zelf ook aan het zoeken) ;)
Code (php)
1
2
2
document.cookie= 'factive='+jQuery('#id').attr('class');
console.log('factive');
console.log('factive');
?
Toevoeging op 02/01/2014 17:42:11:
Ik heb geen selector die de forms van elkaar onderscheiden
Toevoeging op 02/01/2014 17:44:58:
Ben het een beetje kwijt even wat anders doen:)
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
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
$linkform.bind('click',function(e){
var $link = jQuery(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);
console.log($currentForm);
document.cookie= 'factive=' + $currentForm;
//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();
});
var $link = jQuery(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);
console.log($currentForm);
document.cookie= 'factive=' + $currentForm;
//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();
});
Php output is: object Object
ConsoleLog is: jQuery(form.register)
Toevoeging op 02/01/2014 18:11:47:
Ben even snel eten, dan kan ik weer met volle concentratie er tegenaan
Gewijzigd op 02/01/2014 18:10:50 door Francoi gckx