garder jQuery afficher/masquer l'état sur le formulaire de soumission

J'essaie d'afficher un bloc HTML, en utilisant jQuery si une case est cochée. Tout fonctionne bien, jusqu'à ce que je soumets le formulaire (il affiche des erreurs de formulaire en fonction des règles côté serveur)garder jQuery afficher/masquer l'état sur le formulaire de soumission

Mais lors de la visualisation de la page, le bloc de HTML est à nouveau caché. Comment conserver l'état du bloc HTML dans 'show' quand le formulaire est soumis?

J'utilise les éléments suivants:

$(document).ready(function(){ 
    //Hide div w/id extra 
    $(".test").css("display","none"); 

    // Add onclick handler to checkbox w/id checkme 
    $("#yes").click(function(){ 

    // If checked 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
     $(".test").hide("fast"); 
    } 
    }); 

});

Source

2010-11-22 terrid25

Ce que vous pouvez faire:

Ajoutez une entrée masquée dans votre formulaire. Changez sa valeur lorsque vous cochez/décochez. Lorsque la page est rafraichie via l'envoi, vérifiez la valeur du champ caché (via $ _POST ou $ _GET) et ajoutez l'attribut checked = "checked" si nécessaire.

La case à cocher devrait alors être cochée et le code HTML devrait être visible.

Voici quelque chose de travail pour moi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
</head> 
<body> 
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"> 
<input type="hidden" id="verifyCheckbox" name="verifyCheckbox" <?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo 'value="true"'; 
    } 
?>/> 
<input type="checkbox" id="yes" 
<?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo 'checked="checked"'; 
    } 
?> /> 
<input type="submit" /> 
</form> 
<div class="test"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a facilisis risus. Nam quis sapien turpis, non porttitor ante. In vulputate arcu non diam porttitor vulputate. Aenean leo est, adipiscing a egestas ut, dapibus sit amet purus. Quisque pellentesque mi ac orci placerat congue. Nulla sodales mollis arcu sed viverra. Integer id metus turpis. Vivamus interdum convallis sagittis. Quisque quis tellus ante, a consequat eros. Donec tincidunt luctus dolor. Nulla pulvinar, odio et consectetur dictum, mauris massa vulputate magna, et pretium mauris tortor vel nibh. Donec quis tortor lacus, sed fringilla dui. Duis diam nulla, faucibus vel malesuada quis, auctor nec lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam iaculis tristique mauris vitae facilisis. Nulla facilisi. Nulla non nisl id lacus laoreet auctor sit amet non tellus. Vestibulum quis nibh sed ligula tempor scelerisque. Nunc pretium dapibus convallis. Proin pulvinar, tellus vitae imperdiet rhoncus, elit justo scelerisque libero, nec iaculis lacus turpis ut est.</p> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //Hide div w/id extra 
    $(".test").css("display","none"); 

    // Add onclick handler to checkbox w/id checkme 
    $("#yes").click(function(){ 

    // If checked 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
    $("#verifyCheckbox").val("true"); 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
    $("#verifyCheckbox").val("false"); 
     $(".test").hide("fast"); 
    } 
    }); 

    <?php 
    if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true") 
    { 
    echo '$(".test").show();'; 
    } 
?> 

}); 
</script> 
</body> 
</html>

Source

2010-11-22 11:06:44 Flipke

Pouvez-vous donner un exemple? – terrid25

Bien sûr, je vais l'éditer tout de suite – Flipke

Modifié le code ci-dessus et fonctionne un charme! – terrid25

Essayez le déclenchement du clic après la liaison de l'événement click

$(document).ready(function(){ 
    $(".test").css("display","none"); 

    $("#yes").click(function(){ 
    if ($("#yes").is(":checked")) 
    { 
     //show the hidden div 
     $(".test").show("fast"); 
    } 
    else 
    { 
     //otherwise, hide it 
     $(".test").hide("fast"); 
    } 
    }); 
    $("#yes").click(); 
});

EDIT: formating

Source

2010-11-22 11:04:00

Cela semble bien fonctionner, une partie de ma case est cochée par défaut. Donc, la div ne s'affiche pas jusqu'à ce que je désélectionne et revérifie la case – terrid25

Je dois également étendre cela pour utiliser plusieurs cases à cocher, afficher/afficher d'autres – terrid25

On dirait que vous rafraîchir la page lorsque vous soumettez le formulaire (par exemple, soumission de formulaire classique). Si oui, vous avez trois options:

Initie un cookie lorsque l'utilisateur clique sur la case à cocher qui stocke cochant la case; lorsque votre page se charge, utilisez JavaScript pour vérifier le cookie et afficher/masquer le bloc HTML, le cas échéant. Le formulaire doit inclure un drapeau indiquant si la case à cocher est cochée (probablement via un élément d'entrée caché, ou vous pouvez ajouter quelque chose à l'action du formulaire), et avoir la page affichée après la soumission du formulaire par défaut le bloc HTML à afficher ou hidding selon le cas (via un style attribut display: none pour caché).
N'utilisez pas une soumission de formulaire classique si votre utilisateur a JavaScript, utilisez plutôt Ajax.

Ceux-ci sont probablement dans l'ordre de moindre impact pour le plus d'impact sur votre code actuel.

Source

2010-11-22 11:04:42

Je suppose que votre cible de soumission est la même page. Dans ce cas, vous pouvez utiliser une variable de formulaire cachée pour décider si le bloc doit être visible ou caché lors du chargement de la page.

Source

2010-11-22 11:04:46 Thariama

garder jQuery afficher/masquer l'état sur le formulaire de soumission

Répondre

Questions connexes