Passer à une étape spécifique dans le formulaire jQuery

Question

J'utilise le plugin jQuery 'formwizard' et je souhaite autoriser les utilisateurs à passer directement à une étape spécifique du processus.

ce que je pensais le faire était la méthode « show »:

$(function(){ 
    $("#linkId").click(function(){ 
     $("#demoForm").formwizard("show","newLocationId"); 
    }); 
}); 

mais tout cela ne fait exposer l'étape à l'écran sans masquer l'étape précédente.

S'il y avait une autre méthode pour masquer l'écran en cours avant d'appeler le 'show', alors ce serait parfait.

La page d'accueil de fiche est FormWizard Homepage

Quiconque est familier avec ce plugin et de savoir comment passer à une étape spécifique en utilisant une méthode plutôt que de relier d'un élément de forme?

Answer 1

Vous le faites correctement comme vous pouvez le voir dans l'exemple de travail ci-dessous.

example code at thecodemine.org

Le problème que vous rencontrez est dans la plupart des cas liés à Incorrect (X) HTML (et dans la plupart des cas visibles dans les navigateurs ne basés sur WebKit). Donc, si j'étais vous, j'essaierais de nettoyer le HTML et de voir si cela le corrige. Utilisez le validateur à: _http: //validator.w3.org pour valider le code HTML.

Hope this helps

Answer 2

Rappelez-vous de revenir sur les faux éléments des événements que vous liez ...

$(function(){ 
    $("#linkId").click(function(){ 
     $("#demoForm").formwizard("show","newLocationId"); 
     return false; 
    }); 
}); 

Cela a fonctionné pour moi.

Answer 3

J'ai passé quelques heures à essayer de faire fonctionner cela aujourd'hui. L'utilisation de la méthode .formwizard("show","new_step") pour ignorer les étapes n'a pas fonctionné pour moi. Je ne pouvais pas empêcher la transition à l'étape 3 et passer à l'étape 4 de mon formulaire dans la méthode .bind("step_shown",function(){...}), donc j'ai utilisé l'approche de classe «lien» entrée masquée. J'ai inclus un champ masqué lorsqu'un bouton radio spécifique (à l'étape 2) était sélectionné pour un compte gratuit ou payant, ce qui signifiait que l'étape 3 pouvait être entièrement ignorée (aucun détail de facturation requis pour un compte gratuit). J'ai identifié l'étape pour passer à l'utilisation de la classe "link" sur l'entrée cachée.

DOM a le champ suivant qui est en div de l'étape actuellement visible:

<input type="hidden" id="jump_to_fourth_step" value="fourthStep"> 

javascript

a les suivantes:

$('input[name="account_type"]').click(function() { 
    //add "link" class to jump to last step and hide billing fields in summary 
    if($(this).attr("is_free")==true) { 
    $("#jump_to_fourth_step").addClass("link"); 
    $(".billing_info").hide(); 
    } 
    //remove class "link" from input and show billing fields in summary 
    else { 
    $('#jump_to_fourth_step').removeClass("link"); 
    $(".billing_info").show(); 
    } 
}); 

Notez que ce code ne fonctionne que sur l'étape 2 depuis le bouton radio est seulement disponible alors. L'étape 3 est sautée avec succès quand "Next" est frappé avec le compte gratuit sélectionné, et si le bouton back est utilisé à l'étape 4, l'utilisateur retourne à l'étape 2. Et si l'utilisateur décide qu'il veut un compte payant et retourne à l'étape 2 pour marquer comme tel, l'entrée cachée est supprimée, ce qui entraîne une nouvelle fois l'étape 3 (et les informations de facturation seront affichées sur la page de résumé).

Ce n'est pas bien documenté, mais le plugin ira à n'importe quelle étape dans l'attribut "valeur" d'une entrée active sur l'étape actuelle une fois que le bouton "Suivant" est cliqué. Comme vu ci-dessus, la valeur est fourthStep.Et, juste pour être complet, je viens de tester et sauter par-dessus un certain nombre d'étapes est possible, et le bouton retour vous ramènera correctement au bon endroit.