2010-10-18 8 views
2

je JavaScript utilisé pour masquer les div s contenant des éléments de forme:SEULEMENT éléments de formulaire visibles Div obtenir soumis

<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
} 
//--> 
</script> 

Lorsque certaines case (s) sont sélectionnés le sont indiqués div (s) respectif ou obtenir visibles :

<form> 
    <input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1 
    <input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2 
    <input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3 
    <input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4 
    <input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5 
    <div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div> 
    <div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div> 
    <div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div> 
    <div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div> 
    <div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div> 
    <br /> 
    <input type="submit" name="button" id="button" value="Submit" /> 
</form> 

Dans le cas ci-dessus, je l'ai utilisé 5 div s avec cinq entrées, si un utilisateur sélectionne deux cases à cocher et soumet le formulaire, je ne veux pas que les autres 3 champs de saisie pour obtenir soumis avec des champs vides. Plutôt SEULEMENT la valeur de 2 champs d'entrée sélectionnée doit être soumise.

Répondre

0

Ce n'est pas ainsi que fonctionnent les formulaires. Vous devez soit:

  • modifier la valeur des entrées (généralement mauvaises) ou ...
  • manipuler les éléments DOM pour modifier ce qui fait partie de la forme et ce qui est pas à une structure (et non style) niveau (très mauvais) ou ...
  • divisez-le en plusieurs formes et soumettez celui qui vous intéresse uniquement ou ...
  • ne tenez pas compte des informations qui ne vous intéressent pas du côté serveur ou ...
  • changez la conception de votre formulaire.

Sans autre preuve, j'irais avec l'un des deux derniers.

3

Vous pouvez essayer de désactiver les champs vides car les champs désactivés ne sont pas envoyés avec le formulaire.

+0

En effet c'est une bonne idée. Je l'ai utilisé dans certaines de mes applications Web, et cela a fonctionné dans tous les navigateurs que j'ai testés jusqu'à maintenant. Un autre exemple est que dans Firefox, lorsque vous rechargez une page, '' conservera la propriété 'disabled', les données de l'utilisateur ne seront pas perdues. –

0

Je ne vois que deux façons de résoudre ce:

  1. Vérifiez les valeurs des cases à cocher sur le serveur et ignorer les valeurs de zone de texte (mais les valeurs seront envoyé au serveur)
  2. Si elle est décochée, supprimer complètement les divs (ou simplement les entrées) du formulaire en utilisant JavaScript et les rajouter lorsque la case est cochée
  3. Version légèrement modifiée de la précédente serait d'avoir une autre forme cachée, où vous pouvez déplacer les div quand décochée. Vous devez supprimer les éléments du formulaire actuel et les déplacer lorsque la case est cochée. Ainsi, vous pouvez conserver les valeurs que l'utilisateur a déjà remplies dans les zones de texte, mais si elles ne sont pas cochées, elles ne seront pas envoyées avec le formulaire actuel.