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

[Gabriel]

Bonjour à tous !

Problème 1 : Dans mon script de combat, j'ai un formulaire sous forme de liste qui contient la liste des techniques spéciales que le joueur connaît. Il n'est pas obligé de les utiliser et peut choisir de faire une attaque simple ou autre chose.

Ce que je voudrais, c'est que le bouton submit n'apparaisse que si une technique est sélectionnée dans la liste. Je suppose qu'il faut faire ça en javascript mais je n'y connaît rien.



Problème 2 : [résolu] J'ai dans mon jeu une image d'un village avec plusieurs bâtiments. En cliquant sur le bâtiment; le joueur peut y entrer. Cela est gêrer grâce à la balise <map>

Code :

<img src="images/village1.png" usemap="#village" alt="" style="border:none;"/>
        <map name="village1">
            <area shape="rect" coords="10,154,37,193" href="?lieu=village1_magasin" title="magasin"/>
            <area shape="rect" coords="158,158,237,199" href="?lieu=village1_hopital" title="hopital"/>

etc...
        </map>

Schématiquement ça donne ça :



Ce que je voudrais c'est que lorsque le joueur pointe sur curseur de souris sur l'un des bâtiments celui-ci se mette à clignoter comme ici pour celui du milieu :



En gros je veux remplacer l'image de base par une image GIF ou le bâtiment clignote mais je ne sais pas comment faire...

Merci d'avance pour votre aide !

[Ekilio]

De mémoire, tu peux mettre un onmouseover sur la balise area et remplacer la totalité de l'image map (via getElementById) par une image où ça clignote.

[Gabriel]

Tout d'abord merci pour ta réponse.

J'avais effectivement pensé à un onMouveover par contre je ne sais pas comment s'utilise le getelementbyid que tu proposes :heuuu:

[Ekilio]

getElementById est une fonction javascript qui permet de récupérer, dans javascript, un élément en spécifiant son id (qui doit, d'après les normes HTML, être unique sur la page).

Un exemple :

Code :

<img src="images/village1.png" usemap="#village" alt="" style="border:none;" id="monImageMap" />

Notes l'ajout de l'attribut id sur l'image. Encore une fois, celui-ci doit être unique. Et ensuite, la fonction lancée au onmouseover :

Code :

function change()
{
var image = document.getElementById('monImageMap'); // Note que je lui passe en paramètre l'id donné plus haut
image.src = 'images/village1_clignotante.gif';
}

Et voila On change juste l'attribut src de l'image par la valeur qu'on souhaite

[Gabriel]

merci beaucoup ! ça marche à merveille !

J'ai réussi à faire le retour à la normal avec un onMouseover en prennant exemple sur ton bout de code.

Me coucherai moins con se soir

Merci encore

[Gabriel]

Bonjour !!

J'ai un autre problème et plutot que de recréer un autre sujet je préfère le mettre ici :
Tout es expliqué dans le premier post (problème 1)

Merci d'avance

[Sephi-Chan]

En fait c'est pas bien. Il faut faire un sujet par problème (tant que ce sont deux problèmes différents). Ainsi, ça permet d'archiver les réponses.

Effectivement, pour ton problème, il faut utiliser Javascript.
Voici un exemple (qui utilise la librairie jQuery pour faciliter l'emploi de Javascript).

<div class="abilities">

    <div class="ability">

        <input type="radio" value="ability_a" name="ability" id="ability_a" />

        <label for="ability_a">Capacité A</label>

    </div>

    <div class="ability">

        <input type="radio" value="ability_b" name="ability" id="ability_b" />

        <label for="ability_b">Capacité B</label>

    </div>

    <div class="ability">

        <input type="radio" value="ability_c" name="ability" id="ability_c" />

        <label for="ability_c">Capacité C</label>

    </div>

</div>



<div class="submit" id="submit_ability"><input type="submit" value="Effectuer l'action" /></div>

$(document).ready(function(){

  

  /* On cache le bouton. */

  $('#submit_ability').hide();

  

  /*

   * On ajoute un événement : si on change l'état du bouton radio,

   * alors on affiche le bouton.

   */

  $('.abilities .ability input[type=radio]').change(function(){

    $('#submit_ability').show();

  });

  

});

Bien sûr, ça implique que tu utilises jQuery, ce que je te conseille de faire si tu souhaite faire du Javascript en connaissant mal ce langage.


Sephi-Chan

[Freygolow]

Salut,

Tu mets un évènement onchange sur ta liste.
En javascript pour vérifier si tu as choisi un élément dans la liste est:
if(document.getElementById("id_de_la_liste"))
ou
if(document.getElementById("id_de_la_liste").vlaue != "")

Dans le bloc if soit tu affiches le bouton qui était caché
en html: <div id="divInp" style='visibility: hidden'><input type='submit' /></div>
en javascript pour l'afficher: document.getElementById("divInp").style.visibility="bloc";

Soit tu ajoutes le bouton dans un div initialement vide
en html <div id="divInp"></div>
en javascript pour remplir: document.getElementById("divInp").innerHTML = "<input type='submit' />"

[guile]

Chaque élément de ton formulaire possède des évènements.
Sans trop rentrer dans les détails, tu peux, à chaque manipulation d'un élément de formulaire, lancer une fonction javascript qui vérifie l'ensemble de ton formulaire et affiche ou pas le bouton.
exemple :

function maVerifDeFormulaire() {

var bMonFormulaireEstOk = true;

var obj = document.getElementById('monChamp');     // on retrouve l'élément 'monChamp' de la page HTML, on pourra alors faire les véritications...

bMonFormulaireEstOk &= (obj && obj.value) {     // si le champs 'monChamp' existe, et que sa valeur est conforme à ce que j'attends (là j'ai choisi de dire qu'il faut que mon champ ne soit pas vide)

// on fait les autres tests sur les champs du formulaire



if (bMonFormulaireEstOk) {    // tous les champs vérifiés sont OK... on affiche le bouton

var bouton = document.getElementById('monBouton');   // on retrouve l'élément 'monBouton' de la page HTML

if (bouton) {

bouton.style.display = '';   // on affiche le bouton

} else {

bouton.style.display = 'none';  // formulaire pas bon, le bouton est caché...

}

}

}

Code :

<form ...>
<input type="text" onchange="maVerifDeFormulaire();" />
<input type="submit" style="display: none;" value="GOGOGO!!" />
</form>
</form>

Bon évidemment je n'ai pas fait du code qui fonctionne mais l'essentiel est là :
l'évènement onchange pour lancer la fonction de vérif
la fonction qui affiche le bouton



Et comme l'a proposé Sephi-Chan, tu utilises des lib déjà toutes faites et super efficaces

[Gabriel]

J'ai essayé la technique de greygolow :

Code :

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

Ne marche pas. Le bouton submit est toujours affiché même quand je ne clique pas sur ma liste.
Le problème peut venir de mon code (très probable ^^) ou peut être du fait que même quand je ne clique pas sur ma liste, le premier choix est automatiquement sélectionné ?

Merci d'avance !