Version complète: sur le forum Webmaster Hub : Problème avec input type="image"
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net
le_fleau
dimanche 7 mai 2006 à 23:58
Bonsoir,
Voilà, ça fait un moment que je cherche de moi meme et sur le net, mais je ne trouve pas la solution à mon problème. Sur ma page, j'ai besoin d'avoir plusieurs boutons de formulaire sous forme d'image. J'ai essayé avec un :
CODE
<input type="image" src="../club/img/b_off.gif" onclick="addbbcode('b');" name="b" value="b" />
Mais le problème, c'est que quand je clique dessus, il valide le formulaire. Comment faire pour qu'il ne valide pas le formulaire, et qu'il se contente de faire ce que je lui dit dans onclick ???
Voici le javascript associé :
CODE
function addbbcode(balise)
{
if (document.forms['addarticle'].elements[balise].src == '../club/img/'+balise+'_off.gif')
{
document.forms['addarticle'].elements['contenu'].value = document.forms['addarticle'].elements['contenu'].value+'['+balise+']';
document.forms['addarticle'].elements[balise].src = '../club/img/'+balise+'_on.gif';
}
else if (document.forms['addarticle'].elements[balise].src == '../club/img/'+balise+'_on.gif')
{
document.forms['addarticle'].elements['contenu'].value = document.forms['addarticle'].elements['contenu'].value+'[/'+balise+']';
document.forms['addarticle'].elements[balise].src = '../club/img/'+balise+'_off.gif';
}
}

Ca fait un bon moment que je cherche de moi meme et sur le net, sans rien trouver ...
D'avance merci pour votre aide.
Anonymus
lundi 8 mai 2006 à 00:20
Tu as mis ton image dans un <input type=image>, ce qui fait qu'il valide le formulaire.
Il te faut mettre l'image dans un lien <a href pour qu'il prenne ca comme un lien, et non comme un bouton de soumission.

En gros, ca donnerait (non testé) :
CODE
<a href="java script:onclick=addbbcode('b');" ><img src="../club/img/b_off.gif" /></a>


Anonymus.
le_fleau
lundi 8 mai 2006 à 00:27
Merci, mais ça ne marche pas. Cela n'est pas compatible avec le javascript que j'ai donné (la fonction addbbcode). Il faudrait alors changer le javascript, mais je ne sais pas trop là comment faire. En fait, le but, est d'ouvrir des balises de bbcode au premier clic et de les refermer au second, tout en changeant l'image lorsque la balise est ouverte ou non.
TheRec
lundi 8 mai 2006 à 06:11
Bonjour,

Le fonctionnement est le même que les autres éléments HTML cliquables, un "return false;" de la part de Javascript invalide l'action de base :
CODE
<input type="image" src="../club/img/b_off.gif" onclick="addbbcode('b'); return false;" name="b" />

Par contre je ne vois pas pourquoi mettre un value="b" ... mais bon à toi de voir, cela fait juste une valeur de plus à passer... lorsque le formulaire est soumis wink.gif

A savoir que la valeur du clic (coordonnées) et de l'élément (partie value) ne seront pas communiquées au formulaire, vu que ce bouton ne sert pas à envoyer le formulaire...

A moins que Javascript soit désactivé...et tu devrais prévoir ce cas, c'est important au niveau de l'accessibilité (quoi que les bouton type="image", ce n'est pas la panacée à utiliser avec le clavier uniquement wink.gif ).
Lorsque Javascript est désactivé le élément fonctionne normalement, il soumet le formulaire et envoie toutes les valeurs y compris la sienne (en fait 3 dans ton cas : b_x, b_y, B).
le_fleau
lundi 8 mai 2006 à 08:42
Merci TheRec, mais cela ne marche pas. Le comportement reste le meme, le bouton continue à soumettre le formulaire. Sinon, effectivement, je rajouterais une accesskey. Mais de toute façon, il est toujours possible d'utiliser le BBCode de façon manuelle. Ces boutons sont justes là pour simplifier les opérations. Mais l'utilisateur peut lui meme taper les balises.
TheRec
lundi 8 mai 2006 à 09:03
Le "return false;" fonctionne pour le comportement que tu demandes, je l'ai testé et utilisé plusieurs fois.

Peux-tu nous donner le code HTML de ton formulaire dans message...cela m'aidera sûrement à comprendre et isoler le problème.
le_fleau
lundi 8 mai 2006 à 09:19
Voici le code du formulaire complet :
CODE
<form method="post" name="addarticle" action="club-forum-newpost-1.html" onsubmit="submit.disabled=true;">
<div class="contour">
<table class="clubtab">
<tr><th colspan="2">
Poster un nouveau sujet</th></tr>
<tr><td class="clubrowmed clubforhg">Pseudo</td>
<td class="clubrowlight clubforhd"><input type="text" name="pseudo" size="65" maxlength="50" class="class1" /></td></tr>
<tr><td class="clubrowmed clubforhg">Sujet</td>

<td class="clubrowlight clubforhd"><input type="text" name="titre" size="65" maxlength="50" class="class1" /></td></tr>
<tr><td class="clubrowmed clubforhg"><b>Description</b></td>
<td class="clubrowlight clubforhd"><input type="text" name="description" size="65" maxlength="50" class="class1" /></td></tr>
<tr><td class="clubrowmed clubforhg"></td>
<td class="clubrowlight clubforhd">
<input type="image" src="../club/img/b_off.gif" onclick="addbbcode('b'); return false;" name="b" />
</td></tr>
<tr><td class="clubrowmed clubforhg"></td>
<td class="clubrowlight clubforhd">
<table width="80%" border="0" cellspacing="2" cellpadding="1">
<tr><td width="100%" height="15" bgcolor="#DFE8FF" align="left">
<div id="help_buttons">Si vous êtes membres CityLoisir, connectez-vous avant de poster ;)</div>
</td></tr>

</table>
</td></tr>
<tr><td class="clubrowmed clubforhg"><table border="0" width="100%" cellspacing="1" cellpadding="2">
<tr><td width="100%" align="left"><b>Votre message</b><br /><br /></td></tr>
<tr><td width="100%" align="right">
<table border="0" cellspacing="3" cellpadding="0">
<tr><td><a href="#" onclick="addText(' :) ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/smile.gif" title=":)" alt="" /></a></td><td><a href="#" onclick="addText(' ;) ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/wink.gif" title=";)" alt="" /></a></td><td><a href="#" onclick="addText(' :D ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/laugh.gif" title=":D" alt="" /></a></td><td><a href="#" onclick="addText(' :oops: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/blushing.gif" title=":oops:" alt="" /></a></td></tr>
<tr><td><a href="#" onclick="addText(' :roll: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/rolleyes.gif" title=":roll:" alt="" /></a></td><td><a href="#" onclick="addText(' >o( ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/angry.gif" title=">o(" alt="" /></a></td><td><a href="#" onclick="addText(' :( ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/sad.gif" title=":(" alt="" /></a></td><td><a href="#" onclick="addText(' :evil: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/devil.gif" title=":evil:" alt="" /></a></td></tr>
<tr><td><a href="#" onclick="addText(' 8-) ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/cool.gif" title="8-)" alt="" /></a></td><td><a href="#" onclick="addText(' ^^ ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/happy.gif" title="^^" alt="" /></a></td><td><a href="#" onclick="addText(' :blink: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/blink.gif" title=":blink:" alt="" /></a></td><td><a href="#" onclick="addText(' :P ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/tongue.gif" title=":P" alt="" /></a></td></tr>

<tr><td><a href="#" onclick="addText(' :wacko: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/wacko.gif" title=":wacko:" alt="" /></a></td><td><a href="#" onclick="addText(' :\'( ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/weeping.gif" title=":'(" alt="" /></a></td><td><a href="#" onclick="addText(' :whistling: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/whistling.gif" title=":whistling:" alt="" /></a></td><td><a href="#" onclick="addText(' :alien: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/alien.gif" title=":alien:" alt="" /></a></td></tr>
<tr><td><a href="#" onclick="addText(' :sick: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/sick.gif" title=":sick:" alt="" /></a></td><td><a href="#" onclick="addText(' :happy: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/w00t.gif" title=":happy:" alt="" /></a></td><td><a href="#" onclick="addText(' :zzz: ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/sleeping.gif" title=":zzz:" alt="" /></a></td><td><a href="#" onclick="addText(' o:) ');return(false)"><img border="0" src="http://www.cityloisir.com/club/img/smileys/innocent.gif" title="o:)" alt="" /></a></td></tr>
<tr><td colspan="4" class="smalltext" align="center"><a class="graylink">Tous les smileys</a></td></tr>
</table> </td></tr>
</table>
</td>
<td class="clubrowlight clubforhd"><textarea name="contenu" cols="62" rows="15" class="class1"></textarea></td></tr>
<tr><td class="clubrowmed clubforhg"></td>
<td class="clubrowlight clubforhd">

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td align="left" width="0"><input type="checkbox" name="respect" value="1" disabled="disabled" /></td><td align="left" width="100%"><font size="1"><a onclick="java script:alert('Option pas encore active')">M'avertir en cas de r&eacute;ponse</a></font></td></tr>
</table>
</td></tr>
<tr><td colspan="2" class="clubrowdark clubforcenter"><input type="hidden" name="publish" value="true" /><input type="submit" name="submit" value="Envoyer" /><input type="reset" name="reset" value="Effacer" /></td></tr>
<tr><td class="clubsepar" colspan="2">
</td></tr>
</table></div>

</form>

EDIT TheRec/Modérateur : Merci d'utiliser la balises BBCode CODEBOX pour présenter des codes longs à l'avenir.
TheRec
lundi 8 mai 2006 à 10:04
Bon... le problème ne vient pas de l'appel à ta fonction...mais bel et bien de la fonction Javascript en elle-même :
CODE
Erreur : document.forms.addarticle.elements[balise] has no properties
Fichier source : http://devtest.hexadec.ch/form.php
Ligne : 10

L'élément auquel tu fais référence n'existe pas (je sais que balise est une variable...), mais cela ne fonctionne pas... "elements" attent un entier pour désigner l'élément concerné.
Tu peux procéder ainsi :
CODE
function addbbcode(balise) {
 var button = document.getElementById(balise);
 if (button.src == '../club/img/'+balise+'_off.gif') {
   document.forms['addarticle'].elements['contenu'].value = document.forms['addarticle'].elements['contenu'].value+'['+balise+']';
   button.src = '../club/img/'+balise+'_on.gif';
 } else if (button.src == '../club/img/'+balise+'_on.gif') {
   document.forms['addarticle'].elements['contenu'].value = document.forms['addarticle'].elements['contenu'].value+'[/'+balise+']';
   button.src = '../club/img/'+balise+'_off.gif';
 }
}

Et lorsque tu crées ton bouton, il faut spécifier un id (pour rappel, id est unique par page, name peut être utilisé plusieurs fois par page et seul le dernier par formulaire sera envoyé) :
CODE
<input type="image" src="../club/img/b_off.gif" onclick="addbbcode('b'); return false;" name="b" id="b" />

A noter encore que le Javascript tel que je te le donne ne fonctionnerait pas... l'attribut "src" reçoit une URL absolue en Javascript...
Donc la comparaison devrait être faite avec "http://tondomaine.com/club/img/" et non "../club/img/".

Je n'ai pas modifié le nombre de paramètres et leur type pour ta fonction...si ça n'avait pas d'importance, tu devrais plutôt passer l'objet en lui même et modifier ta fonction dans ce sens...
CODE
<input type="image" src="../club/img/b_off.gif" onclick="addbbcode(this); return false;" name= "b" id="b" />

L'utilisation de this te permet d'identifier ton bouton et si tu spécifie comme name le nom de la balise tu pourras les récupérer en utilisant button.name et button.scr pour peux que tu nomme "button" le paramètre de ta fonction wink.gif
le_fleau
lundi 8 mai 2006 à 10:06
Je te remercie TheRec, j'essaierais cela dès mon retour (je dois m'absenter). Merci beaucoup en tous cas pour ton aide smile.gif
le_fleau
lundi 8 mai 2006 à 10:23
Merci encore, mais désolé, j'ai testé rapidement, mais ça ne change rien :s Voici l'URL de la page http://www.cityloisir.com/home/club-forum-newpost-1.html. Firefox me marque le false de return false en rouge ... Merci pour ton aide.
TheRec
lundi 8 mai 2006 à 11:18
Il te marque ceci parce que tu as fait une erreur de syntaxe :
CODE
<input type="image" src="http://www.cityloisir.com/club/img/b_off.gif" onclick="onclick="addbbcode(this); return false;" name="b" id="b" />

devrait être :
CODE
<input type="image" src="http://www.cityloisir.com/club/img/b_off.gif" onclick="addbbcode('b'); return false;" name="b" id="b" />


Je vois également que tu as utilisé this comme paramètre...c'est bien, mais faut-il encore changer la fonction que tu appelles pour l'utiliser correctement...j'ai bien dit que si tu voulais changer ceci, la fonction Javascript changerais...la fonction que j'ai modifiée précédemment n'était pas faite pour fonctionner avec "this", ainsi tu n'avais pas besoin changer l'appel de la fonction...

Ce sont deux manière de faire...je préfère celle avec this...mais libre à toi de choisir celle qui te convient.
le_fleau
lundi 8 mai 2006 à 19:09
Oups, désolé, effectivement, je suis vraiment allé vite ce matin.
Désolé, mais en tous cas ça marche !
Merci beaucoup pour ton aide !!!
TheRec
lundi 8 mai 2006 à 19:14
De rien... lorsque tu utilises du Javascript, il est presque essentiel de te munir de la console Javascript de ton navigateur favori (Pour Firefox elle se trouve dans le menu : Outils / Console JavaScript ... malheureusement ou heureusement Firefox, depuis la version 1.5, y enregistre également les erreurs rencontrées lors de l'interprétation des CSS :S)
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.