[DOM] Modifer dynamiquement un formulaire

**mcdelay** · 21/06/2007, 09h39

Bonjour,

Je veux modifier un formulaire lors d'une clic sur un lien sans chargement d'une nouvelle page. J'ai utilisé la fonction javascript innerHTML pour changer des éléments dynamiquement mais je n'arrive pas obtenir ce que je veux:
Voici mon formulaire à l'état1 et ce qu'il doit devenir à l'état 2.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Etat 1:
 
<html>
  <script type="text/javascript" src="java.js"></script>
  <body>
    <table border = 1>
      <tr>
        <td colspan = 3>Titre</td>
      </tr>
      <tr>
        <td id="col1"><a href="javascript:fJava1();">F</a></td>
        <td>Un</td>
        <td>Deux</td>
      </tr>
    </table>
    <div id="frm"></div>
  </body>
</html>
 
Etat 2
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <script type="text/javascript" src="Java.js"></script>
  <body>
    <table border = 1>
      <tr>
        <td colspan = 2>Titre</td>
      </tr>
      <tr>
        <td id="col1"><a href="javascript:fJava2();">R</a></td>
        <td>Deux</td>
      </tr>
    </table>
    <div id="frm"></div>
  </body>
</html>

Ma fonction fJava1 est la suivante:
Elle change le contenu de ma balise id="col1"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("col1").innerHTML = "<a href='javascript:fAjax1();'>R</a>";

La fonction fJava2 fait de même. Par contre comment dois je proceder pour changer le contenu de la balise <td> du titre (colspan 3 à 2 et vice vers ca) ? .J'ai essaye de mettre ma balise <td colspan = 3>Titre</td>
entre une balise <div id="titre"> et faire dans mes fonctions le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("titre").innerHTML = "<td colspan = 2>Hello2</td>"; (et 3 pour l'autre fonction)

..mais ca ne marche pas apparemment.

Il faudrait aussi que je supprime une de mes colonnes de ma deuxieme ligne <td>Un</td>.

J'ai reussi a obtenir ce que je voulais avec ajax et en creant deux formulaires dictincts (1 et 2) mais je ne veux pas passer par la creation de deux formulaires, je souhaite en avoir un seul et changer dynamiquement son contenu sans raffraichissement.
La premiere méthode n'utilise pas ajax

Voila j'espere avoir été la plus clair possible. Merci de votre aide

**E.Bzz** · 21/06/2007, 09h56

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td colspan="3" id="titre">Titre</td>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("titre").innerHTML = "Hello2";

Pour ajouter autre chose que du texte "en dur", il faut utiliser le DOM et pas innerHTML ...

A+

**SpaceFrog** · 21/06/2007, 09h59

... innerHTML

à n'utiliser éventuellement que pour mettre du simple texte ...

lui préférer le DOM !

**mcdelay** · 21/06/2007, 10h44

.. c'est ce que j'ai contasté, effectivement je n'arrivais qu'à mettre du texte. Je vais faire des recherches sur DOM. Y a t-il des sujets déjà traités ?