Reload de la page non désiré?

[Amuny]

Bonjour à tous!

J'hésitais un peu dans quel forum aller placer la chose mais je soupçonne le JS être la source du problème donc on va y aller ici.

Je développe actuellement un site en PHP/JS, et j'ai un petit problème très... énervant.

En fait, je travaille sur un petit CMS maison rapide, mais qui commence a être pas si rapide que ça sachant que ça fait plusieurs heures que je suis planté sur ce problème.

Comme le dit le titre, ma page se rafraîchit alors que je n'ai pas du tout l'intention qu'elle le fasse, et je perd donc toute mes données dans mon formulaire!

Voici les bouts de code concernés:

HTML/PHP

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form name="text" method="post" action="#">
  <?php TextEditor(); ?>
</form>
 
-----------
 
function TextEditor()
	{
		echo '
			<span id="toolbar" class="ui-widget-header ui-corner-all">
				<button id="jump" onClientClick="TextEdit(br)"> Saut de Ligne </button>
				<button id="image" onClientClick="TextEdit(img)"> Image </button>
				<button id="bold" onClientClick="TextEdit(b)"> Gras </button>
				<button id="size" onClientClick="TextEdit(size)"> Taille </button>
			</span>
			<textarea id="texteditor" name="texteditor" cols="80" rows="40"></textarea>
		';
	}

Javascript

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function TextEdit(type)
{
	if (type == "br")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<br/>";
	if (type == "b")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<b></b>";
	if (type == "img")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<img></img>";
	if (type == "size")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<size=2></size>";
 
}

Et donc en gros, dès que je clic sur un des boutons, qui a pour but d'ajouter une balise dans le cadre de texte pour mettre un strict minimum de mise en forme, la page se reload. Donc au final je vois les balises apparaître une demi seconde, et la page se reload donc je perd toute les données précédentes.

J'arrive vraiment pas a comprendre d'où sa viens, ni trouver comment l'empêcher sans complètement bloquer les fonctionnalités du formulaire


Sincèrement,
Amuny.

[nadox]

Bonjour,

Peux tu nous donner le code HTML généré, s'il-te-plaît ?

[nadox]

http://www.w3schools.com/tags/tag_button.asp

--> lire le browser support. (surtout le 'important')

[Amuny]

D'abord merci de la rapidité je m'attendais pas a tant

J'ai lu le petit truc et donc changer les buttons en input button,

Résultat; maintenant, ça ne fait absolument plus rien La page ne reload plus, mais je n'ai pas non plus ma balise !?

le code HTML:`

Code :

1
2
3
4
5
6
7
8
9
10
<form name="text" method="post" action="#"> 
 
			<span id="toolbar" class="ui-widget-header ui-corner-all"> 
				<input type="button" id="jump" onClick="TextEdit(br)" value="Saut de Ligne" /> 
				<input type="button" id="image" onClick="TextEdit(img)" value="Image" /> 
				<input type="button" id="bold" onClick="TextEdit(b)" value="Gras" /> 
				<input type="button" id="size" onClick="TextEdit(size)" value="Taille" /> 
			</span> 
			<textarea id="texteditor" name="texteditor" cols="80" rows="40"></textarea> 
											</form>

Javascript:

Code :

1
2
3
4
5
6
7
8
9
10
11
function TextEdit(type)
{
	if (type == "br")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<br/>";
	if (type == "b")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<b></b>";
	if (type == "img")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<img></img>";
	if (type == "size")
		document.getElementById("texteditor").value = document.getElementById("texteditor").value + "<size=2></size>";
}

Edit: Ok ca fonctionne, j'ai juste ajuster des guillemets dans l'appel du javascript sur le onClick du button.

Merci beaucoup pour le coup de main