[Résolu] Bouton submit qui apparaît lorsque le formulaire est rempli ?

[Sephi-Chan]

Il serait plutôt pratique que tu nous montre ton code HTML…

En plus, le code donné ne peut pas marcher : la propriété de style "visibility" n'accepte pas la valeur "bloc".

Si tu veux du résultat sans avoir à t'embêter à bien apprendre Javascript, penses au code que je t'ai donné.

Javascript n'est pas un langage très simple du fait qu'il est interprété différemment d'un navigateur à l'autre. C'est pourquoi je te conseille d'utiliser jQuery. Il permet à un néophyte du Javascript de faire des trucs sympas et fonctionnels dans tous les navigateurs. De plus, il évite de pourrir ton code source avec des onchange="..." partout.


Sephi-Chan

[Gabriel]

Code :

<form method="post" action="combat.php">
<select name="technique" id="techniques"tabindex="40">
<optgroup label="Techniques" selected="selected">

<option value="technique1" >Technique1</option>
<option value="technique2" >Technique2</option>


    </select>
    
    <div id="divInp" style='visibility: hidden'><input type='submit' /></div>
    
    <script type="text/javascript">
    if(document.getElementById("techniques").value != "")
        {
                document.getElementById("divInp").style.visibility="visible";
        
        }
    </script>

Voila pour le html.
En ce qui concerne le jQuery, j'utilise déjà mootools pour faire des effets lightbox / slimbox
je n'ai pas réussi à trouver de tutos sur jQuery contrairement à mootools et c'est ce qui à motivé mon choix envers mootools car c'est pour moi le seul moyen pour apprendre à m'en servir.

Mais bon je suppose qu'il y a moyen d'utiliser lightbox avec jQuery ? Bref à voir

En ce qui concerne mon problème ==> si je ne met aucune option dans ma liste, le bouton submit n'apparait pas (jusque là ça va )
Par contre si je mes des options comme c'est le cas là, "technique1" est affiché dans le menu déroulant dès le début et je pense que c'est ça qui fait afficher le bouton submit dès le début

[Sephi-Chan]

Voilà un peu de code : http://pastie.org/599519.

J'ai pas le temps de tout bien implémenter là, mais ça te donnera une base de travail correcte. Je corrigerai à mon retour.


Sephi-Chan

[Gabriel]

J'ai résolu mon problème comme ça :

Code :

<form method="post" action="combat.php">
<select name="technique" id="techniques"tabindex="40" onchange="voirSelection(this)">
<option value="rien" >Techniques...</option>';

<option value="technique1" >Technique1</option>
<option value="technique2" >Technique2</option>


    </select


    <div id="divInp" style='visibility: hidden'><input type="image" name="photo" src="images/technique.png"></input></div>
    
    <script type="text/javascript">
    function voirSelection(liste)
    {
         var numero = liste.selectedIndex;
         var valeur = liste.options[numero].value;

         if(valeur != 'rien')
         {
        

        document.getElementById("divInp").style.visibility="visible";
         }
    }
    </script>

Par contre ça oblige à avoir un champ qui ne sert à rien et qui doit être mis par défaut...ce qui n'est pas forcement idéal...
Donc j'attends de voir ce que tu me propose

[Freygolow]

Il doit bien y avoir une solution pour savoir si la liste déroulante est remplie:

if(document.getElementById("techniques").value != "")
ou
if(document.getElementById("techniques").value != 0)
ou
if(document.getElementById("techniques"))

Si aucun d'eux ne passe, fais un alert(document.getElementById("techniques").value); pour voir ce qu'il affiche lorsque l'on ne choisi rien.

[Sephi-Chan]

Par contre ça oblige à avoir un champ qui ne sert à rien et qui doit être mis par défaut...ce qui n'est pas forcement idéal...
Donc j'attends de voir ce que tu me propose

Si tu n'as pas de champ vide par défaut, ton problème n'a pas de sens, puisqu'il y aura toujours un élément sélectionner, donc le bouton submit sera toujours apparent…

En fait, tu gagnerais à nous dire ce que tu cherches à obtenir, je suis sûr qu'on arrivera à trouver mieux qu'un menu de sélection.


Sephi-Chan

[Gabriel]

Justement, j'ai ajouté un champ inutile par défaut pour résoudre problème mais je pensais qu'on pouvait faire sans mais apparement ce n'est pas le cas

Mieux qu'un menu de sélection certes ça doit pouvoir se faire mais j'ai pas d'idée. Je vous explique mon script :

D'abord on a tous ce qui concerne les 2 adversaires (vie / attaque / défense / etc.......)
Ensuite, les résultats du round précédent (le combat se déroule en rounds)

Enfin, le choix pour le prochain round : Attaquer / Défendre / Fuir / Techniques spéciales (plus puissantes que l'attaque de base mais qui font baisser l'endurance)(ce que vous avez vu plus haut) qui sont regroupées dans un menu déroulant.

Voila, si vous avez des idées pour améliorer le tout je suis toute ouïe

[Sephi-Chan]

Et bien tu peux fournir à ton utilisateur des boutons comme les boutons que l'on peut trouver dans l'interface de la majorité des jeux vidéos (pour l'immersion, c'est mieux qu'un composant de formulaire).

J'ai réalisé quelque chose comme ça au boulot récemment. Dans l'application, on a un panneau qui affiche l'icône de plusieurs radios et l'on peut en sélectionner une ou plusieurs. Les images qui ne sont pas sélectionnées sont grisées et deviennent opaque quand on les clique.

Derrière le Javascript, il y a de simples checkboxes qui sont cachées (par Javascript) mais le label qui entoure l'image fait qu'on peut cocher ces checkboxes en cliquant sur l'image, donc ça marche très bien sans Javascript.

Voici une rapide adaptation à ton cas :

<div id="abilities_pane">

  <div class="unchecked" class="ability_box" id="ability_attack">

    <label for="item_ability_attack"><img alt="Attaquer" src="/images/attaque.png" /></label>

    <input id="item_ability_attack" name="action" type="checkbox" value="attack" />

  </div>



  <div class="unchecked" class="ability_box" id="ability_run">

    <label for="item_ability_run"><img alt="Attaquer" src="/images/run.png" /></label>

    <input id="item_ability_run" name="action" type="checkbox" value="run" />

  </div>

</div>



<!-- Et là tu mets ton bouton submit. -->

La partie Javascript utilise la librairie Prototype, mais je te montre quand même l'idée, que tu puisses l'adapter à Mootools :

document.observe('dom:loaded', function(){

  

  var checked_elements = 0;

  var unchecked_opacity = 0.4;

  var checked_opacity = 1;

  

  var ability_boxes = $('div.abilities_pane .ability_box');

  

  ability_boxes.each(function(ability_box){

    var img = ability_box.select('img').first();

    var input = ability_box.select('input').first();

    

    input.hide();

    img.setOpacity(unchecked_opacity);

    

    Event.observe(img, 'click', function(event){

      

      if(checked_elements == 0){      

        // Retrieve the object in which the user click.

        var clicked_img = Event.element(event);

        clicked_img.toggleClassName('checked');

      

        if(clicked_img.hasClassName('checked')){

          clicked_img.setOpacity(checked_opacity);

          checked_elements += 1;

        }

        else {

          clicked_img.setOpacity(unchecked_opacity);

          checked_elements -= 1;

        }

      }

      else {

        alert("Vous ne pouvez pas effectuer plus d'une action.");

      }

    });

  });

  

});

Sephi-Chan

[Gabriel]

J'ai fait ça avec des images effectivement pour les liens "attaquer" / "defendre" / "fuir" et mon bouton submit est aussi une image.

Ta technique est pas mal du tout, surtout l'idée de la checkbox image Je vais voir ça ! Encore merci pour tous !