Désactiver les éléments de formulaire à l'intérieur de div

Question

J'ai un problème avec ma forme querystring étant trop long.

Je prévois de résoudre ce problème en désactivant simplement tous les éléments de formulaire inutilisés avant de soumettre. Mais je besoin d'aide à faire de cette fonction js ...

Vous devez savoir que j'ai une js-fonction qui montre sous-catégories chaque fois qu'une principale catégorie est choisi. Cela se produit "onChange" sur une liste déroulante. Donc, "onChange" de la liste déroulante de la catégorie, le DIV correct est fait visible en utilisant javascript, et donc en faisant sous-catégories visible pour l'utilisateur à spécifier (les utilisateurs peuvent choisir la couleur, la marque, l'année etc etc dans les sous-catégories).

Par exemple, si vous avez choisi « Cars » de la principale liste déroulante de catégorie, la fonction js fera l'DIV qui contient tous les « Cars » Options visibles (couleur, faites, année, etc.). Ensuite, si vous avez choisi une autre catégorie, dites "Trucks", "Cars" devient invisible, et le "Trucks" DIV est rendu visible. Simple.

Cependant, mon problème est que même si les DIVs ne sont pas visibles pour l'instant, les éléments de formulaire à l'intérieur sont soumis de toute façon. Ceci est complètement inutile. J'ai donc besoin d'une fonction javascript qui pourrait être intégrée dans la fonction déjà existante qui cache/affiche la sous-catégorie DIVs, ce qui désactiverait tous les éléments à l'intérieur des DIVs inutilisés.

Voici la fonction qui montre/cache DIVs sous-catégorie, et est déclenchée onChange de la principale liste déroulante Catégorie:

var category=document.nav_form_main.nav_category_list.value; 
(category=="Cars")?byId("nav_sub_cars").style.display='block' : byId("nav_sub_cars").style.display='none'; 
(category=="Trucks")?byId("nav_sub_trucks").style.display='block' : byId("nav_sub_trucks").style.display='none'; 

Je voudrais quelque chose comme ceci:

(category=="Cars")?byId("nav_sub_cars").style.display='block' : disableDiv("nav_sub_cars"); 

function disableDiv(divId){ 
    Disable all form elements inside divId 
    AND 
    make divId invisible. 
} 

Remarque: les divs contiennent uniquement des éléments de formulaire et des tables. En d'autres termes, je ne m'inquiète pas si tous les éléments à l'intérieur de la div sont désactivés. Par éléments de formulaire, je veux dire: les entrées de texte, les listes de sélection, les cases à cocher et les radios.

Je ne sais pas beaucoup js à tous, de sorte que toute aide à faire de cette fonction qui ne devrait pas être trop difficile est apprécié ...

Merci

Answer 1

Ce code devrait faire l'affaire. Je l'ai testé dans IE6 et FF3.6. La fonction loopThroughItems n'est pas indispensable Je ne voulais pas répéter la boucle. Vous devriez également jeter un oeil à l'utilisation de jQuery si c'est une option viable - vous auriez amélioré la compatibilité entre les navigateurs et ce ne serait que quelques lignes de code.

function loopThroughItems(items, func){ 
    var i; 
    for(i = 0; i <= items.length; i++){ 
     func(items[i]); 
    } 
} 

// Change test to ID of your div. 
var div = document.getElementById("test"); 

loopThroughItems(div.getElementsByTagName("input"), function(input){ 
    if (!input || input.type.toLowerCase() == "submit") return; 
    input.disabled = true; 
}); 

loopThroughItems(div.getElementsByTagName("select"), function(select){ 
    if (!select) return; 
    select.disabled = true; 
}); 

    // Hide div. 
div.style.display = "none"; 

Avec jQuery, la syntaxe devrait être quelque chose comme ça. Je n'ai pas testé cela et vous devez changer le sélecteur de manière à exclure l'entrée de soumission. Dans tous les cas, votre code sera plus compact, plus concis et aura une compatibilité croisée améliorée.

$("#divId").find("input, select").attr("disabled", "disabled"); 
$("#divId").hide(); 

Answer 2

Que diriez-vous déplacer que div à un autre élément en dehors de la forme:

HTML:

<form> 
    <div id="div1"> 
     ...some input, select button etc here.... 
    </div> 
</form> 

<div id="temp-div1" style="display:none;"> 

</div> 

fonction

JS:

function disableDiv(divId){ 
    var src = byId(divId); 
    var dst = byId('temp-' + divId); 

    var htm = src.innerHTML; //assigned it first to temp to avoid duplicate elements on dom 
    src.innerHTML = ''; 
    dst.innerHTML = htm;  
} 

function enableDiv(divId){ 
    var dst= byId(divId); 
    var src= byId('temp-' + divId); 

    var htm = src.innerHTML; //assigned it first to temp to avoid duplicate elements on dom 
    src.innerHTML = ''; 
    dst.innerHTML = htm;  
} 

Très méchant, mais cela va faire la tour.

Answer 3

Je pense que la meilleure solution sera de créer des pages de résultats statiques pour chaque recherche. Utilisez POST pour la soumission initiale du formulaire, traitez-le côté serveur, stockez les résultats dans la base de données, puis redirigez l'utilisateur vers une page affichant les résultats.

Vous voyez cela souvent sur le logiciel du forum, vous êtes redirigé vers une page comme search.php?id=123.

---

Une autre solution qui peut être plus simple est de générer toutes les options avec Javascript lorsque vous choisissez voitures ou des camions, puis supprimer complètement les autres champs que vous ne souhaitez pas soumettre. (See here for a tutorial lors de l'ajout et de la suppression d'éléments avec Javascript)