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

[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