Problème avec input type="image"

[le_fleau]

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 :

<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é :

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]

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é) :

<a href="java script:onclick=addbbcode('b');" ><img src="../club/img/b_off.gif" /></a>

Anonymus.

[le_fleau]

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.

Modifié 7 Mai 2006 par le_fleau

[TheRec]

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 :

<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

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 ).

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, .

[le_fleau]

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]

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]

Voici le code du formulaire complet :

<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 Site Exemple, 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.site-exemple.com/club/img/smileys/smile.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/wink.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/laugh.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/blushing.gif" title="" alt="" /></a></td></tr>
  <tr><td><a href="#" onclick="addText(' :roll: ');return(false)"><img border="0" src="http://www.site-exemple.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.site-exemple.com/club/img/smileys/angry.gif" title=">o(" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/sad.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/devil.gif" title="" alt="" /></a></td></tr>
  <tr><td><a href="#" onclick="addText(' 8-) ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/cool.gif" title="8-)" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/happy.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/blink.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/tongue.gif" title="" alt="" /></a></td></tr>

  <tr><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/wacko.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText(' :\'( ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/weeping.gif" title=":'(" alt="" /></a></td><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/whistling.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText(' :alien: ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/alien.gif" title=":alien:" alt="" /></a></td></tr>
  <tr><td><a href="#" onclick="addText('  ');return(false)"><img border="0" src="http://www.site-exemple.com/club/img/smileys/sick.gif" title="" alt="" /></a></td><td><a href="#" onclick="addText(' :happy: ');return(false)"><img border="0" src="http://www.site-exemple.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.site-exemple.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.site-exemple.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é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.

**EDIT Administrateur (TheRec)** Edition des liens morts et suppression de la marque à la demande de l'auteur.

[TheRec]

Bon... le problème ne vient pas de l'appel à ta fonction...mais bel et bien de la fonction Javascript en elle-même :

Erreur : document.forms.addarticle.elements[balise] has no properties
Fichier source : 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 :

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é) :

<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 &quot;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...

<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

[le_fleau]

Je te remercie TheRec, j'essaierais cela dès mon retour (je dois m'absenter). Merci beaucoup en tous cas pour ton aide

[le_fleau]

Merci encore, mais désolé, j'ai testé rapidement, mais ça ne change rien :s Voici l'URL de la page -http://www.site-exemple.com/home/club-forum-newpost-1.html. Firefox me marque le false de return false en rouge ... Merci pour ton aide.

**EDIT Administrateur (TheRec)** Edition des liens morts et suppression de la marque à la demande de l'auteur.

[TheRec]

Il te marque ceci parce que tu as fait une erreur de syntaxe :

<input type="image" src="http://www.site-exemple.com/club/img/b_off.gif" onclick="onclick="addbbcode(this); return false;" name="b" id="b" />

devrait être :

<input type="image" src="http://www.site-exemple.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.

**EDIT Administrateur (TheRec)** Edition des liens morts et suppression de la marque à la demande de l'auteur.

[le_fleau]

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]

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)