[Résolu] Input image multiples dans un formulaire

Bonjour,

Apres avoir effectué plusieurs fois la recherche, je n'ai pas trouvé de sujet traitant de ce probleme.. pardonnez moi si je suis passé a coté.

Voila j'ai un formulaire servant a poster des commentaires sur mon site.

Au début je n'avais que le bouton permettant de valider, que j'avais personnalisé comme ceci :

<input type="image" name="ok" src="images/btn_ok.png" onclick="submit"/>

Puis j'ai développé un systeme de balise type BBcode (en l'occurence une seule balise pour l'instant pour les URL). J'ai donc ajouté un nouveau bouton a mon formulaire appelant un javascript qui ajoute la balise en question:

<input type="button" value="URL" onclick="insertion('{url=http://www.votreadresse.com}', '{/url}')"/>

La encore, tout fonctionnait à merveille.

Seulement je souhaite égalemment personnaliser ce bouton, or si je le transforme de cette façon :

<input type="image" name="url" src="images/btn_url.png" onclick="insertion('{url=http://www.votreadresse.com}', '{/url}"/>

une fois que l'on clique sur le bouton, la balise s'ajoute bien mais cela valide égalemment le formulaire!
Est-il impossible d'avoir 2 (ou plus) boutons de type input="image" dans un même formulaire? OU est-ce que tout simplement je m'y prend mal?

Merci d'avance pour vos lumières, je sais que sur Alsacréation on ne reste jamais longtemps dans le noir.

PS : Les accolades "{}" dans le code sont la en remplacement des "[]" pour éviter la confusion avec les balises du site
Modifié par Lionel Zero (30 May 2007 - 16:27)

Salut Lionel Zero,


J'ai pas bien compris l'objectif de ton code (surtout avec les images) ni comment tes pages sont faites.
Tu devrais donner d'avantage de code (y compris le formulaire).

Si c'est la soumission du formulaire qui t'ennuie tu peux faire ça :

<form action="" onsubmit="return false">
<input type="image"/>
<input type="image"/>
</form>

La soumission du formulaire sera annulée.

Voila,
j'espère t'avoir illuminé

Heu... c'est moi ou le bouton image en question n'est pas du tout un bouton de formulaire, mais simplement une image que l'on utilise pour déclencher une fonction Javascript lors du clic ?

Pourquoi utiliser un élément de formulaire (input), dont le comportement par défaut (en particulier lorsque Javascript est désactivé) n'est pas neutre, alors qu'on veut juste faire un bouton Javascript. C'est c'est pour la mise en forme, bip, mauvaise réponse.

Concrètement : faire un bouton Javascript avec une image (<img>), tout bêtement. Penser au texte alternatif pour l'image. Et enfin : si la fonctionnalité n'est disponible qu'avec Javascript, mieux vaut générer le bouton avec Javascript (ainsi, si JS est désactivé on ne verra pas dans la page de bouton non fonctionnel).

Merci pour ces précisions.

En effet ce que j'appelle "bouton image" n'est qu'une image dont je me sert pour déclencher un javascript.

Pourquoi utiliser un élément de formulaire? Eh bien parce que je pensais que mon script avait besoin d'être appelé via un élément de formulaire justement... Ce qui est faux apparemment!

Donc si j'ai bien compris florent, pas besoin d'utiliser un élément de formulaire, il suffit de généré un bouton javascript... D'accord mais euh... je crois pas avoir déja fait ça... (l'étendue de mon ignorance n'as décidément pas de limite! Plus j'apprends, et plus je me rends compte que je sais rien...)

Juste pour clarifier le problème aux yeux d'autres lecteurs, voici le formulaire dans sa totalité :

<form method="POST" name="comment" action="ajoutcom.php">
		
<table align="center">
		
<tr>
<td align="center">Votre texte :</td>
<td><input type="hidden" name="pseudo" value="<?php echo $pseudo; ?>" /></td>
</tr>

<tr>
<td colspan="2"><textarea name="texte" cols="55" rows="6"></textarea></td>
</tr>

<tr>
<td align="center"><input type="image" name="url" src="images/btn_url.png" onclick="insertion('{url=http://www.votreadresse.com}', '{/url}')"/></td>
<td align="right"><input type="image" name="ok" src="images/btn_ok.png" onclick="submit"/></td>
</tr>
		
</table>
		
</form>

Je met égalemment le javascript appelé afin que vous puissiez me dire si je dois le modifier pour le faire fonctionner avec un bouton javascript simple :

function insertion(balisedebut, balisefin) {

var input = document.forms['comment'].elements['texte'];
input.focus();
  
/* pour l'Explorer Internet */
  
if(typeof document.selection != 'undefined') {
	
var range = document.selection.createRange();
var insText = range.text;
range.text = balisedebut + insText + balisefin;
	
range = document.selection.createRange();

if (insText.length == 0) {
range.move('character', -balisefin.length);
} else {
range.moveStart('character', balisedebut.length + insText.length + balisefin.length);
}
    
range.select();

}
  
/* pour navigateurs plus récents basés sur Gecko*/
  
else if(typeof input.selectionStart != 'undefined') {
	
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + balisedebut + insText + balisefin + input.value.substr(end);
	
var pos;

if (insText.length == 0) {
pos = start + balisedebut.length;
} else {
pos = start + balisedebut.length + insText.length + balisefin.length;
}
    
input.selectionStart = pos;
input.selectionEnd = pos;

}
  
/* pour les autres navigateurs */
  
else{
	
var pos;
var re = new RegExp('^[0-9]{0,3}$');

while(!re.test(pos)) {
pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
}

if(pos > input.value.length) {
pos = input.value.length;
}
	
var insText = prompt("Veuillez entrer le texte à formater:");
input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);

}

}

Si vous pouviez me guider concernant les modifications à apporté pour réaliser la solution de Florent, ce serait merveilleux! Parce que j'avoue que la c'est encore un peu trouble pour moi...

D'avance Merci!
Modifié par Lionel Zero (30 May 2007 - 14:46)

Merci bcp florent, décidément ce forum est des plus efficace!

Je vais modifier ma page pour tester cette solution et dès que j'aurais validé je passe modifié mon titre de sujet en résolu!

EDIT :Test effectué, et ça marche, tout simplement! Ahlala comme cela parait simple maitnenant!
Merci encore pour la réactivité du forum et en esperant que ce sujet pourra servir à d'autres comme moi... si il y en a!

Allez, juste pour chercher la petite bete, mais je vais chercher par moi même, dans cette solution, le curseur ne change pas au desus de l'image... Vais voir comment corriger ça.(une balise <a> vide?...)

pour les courageux le résultat est visible en ligne, sur mon site
Mais il faudra s'inscrire pour avoir acces au formulaire des commentaires en bas d'article...


PS: Pour l'utilisation du tableau, j'avoue que c'était la solution de facilité pour positionner correctement mon petit formulaire dans la structure de ma page.
Modifié par Lionel Zero (30 May 2007 - 16:28)

Lionel Zero a écrit :
Allez, juste pour chercher la petite bete, mais je vais chercher par moi même, dans cette solution, le curseur ne change pas au desus de l'image...

Un peu de CSS ?

img.boutonjs {cursor: pointer}

Merci Florent, décidement le soucis du détail!

J'avais utilisé cette propriété mais directement dans la balise image comme ceci :

<img src="images/btn_url.png" style="cursor: pointer;" />

Il vaut mieux éviter je suppose?

Lionel Zero a écrit :

<img src="images/btn_url.png" style="cursor: pointer;" />

Il vaut mieux éviter je suppose?

Oui il vaut mieux faire comme Florent
et tu mets un attribut class="boutonjs" dans tes balises img.
Avec cette méthode, ta définition des boutons est centralisée et commune aux "images boutons". Ca donne ça au final :

<img src="images/btn_url.png" alt="aller vers ..." class="boutonjs" />

tioneb369 a écrit :
Oui il vaut mieux faire comme Florent

Disons juste pour être clair que passer par une classe CSS peut être utile, mais que ça n'est pas pour autant une obligation.

Probleme reglé avec brio! Merci a tous pour votre aide!