[javascript] Modifier Info Formulaire

Résolu/Fermé

Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 - 27 mars 2009 à 17:01
Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 - 2 avril 2009 à 12:03

Bonjour,

Voilà j'ai un tableau en php qui me sort tout plein d'infos qui ressemble à ça :

id | Nom | Prenom | Age | Action
1 | Durand | Leon | 17 | Modifier
2 | Duren | Jules | 15 | Modifier
3 | Dupond | Phil | 19 | Modifier

En fait j'aimerai quand on on clique sur le bouton "Modifier", tout les champs de la ligne deviennent modifiable (c'est-à-dire dans un champ formulaire) et que le bouton "Modifier" devienne "Valider"

Donc si la ligne est en lecture seul alors on à le bouton "Modifier" sur la droite et dès qu'on clique dessus le bouton change et dedans yaurait marquer "Valider". Une fois qu'on clique sur valider la ligne redevient en lecture seule avec le bouton "Modifier".

Est-ce-que quelqu'un saurait faire ce genre de chose ? ou pourrais m'expliquer si c'est possible ou bien une alternative ?

Merci beaucoup.

Cordialement,

A voir également:

[javascript] Modifier Info Formulaire
Modifier dns - Guide
Modifier liste déroulante excel - Guide
Comment modifier un pdf - Guide
Info pc - Guide
Modifier story facebook - Guide

5 réponses

Réponse 1 / 5

Ozareff
28 mars 2009 à 11:39

C'est effectivement tout à fait possible en javascript.
Une solution assez simple consisterait à écrire toutes tes données dans des champs de texte de type input, et à leur ajouter un attribut "readonly" (la lecture seule dont tu parlais) par défaut.
Lors du clic sur le bouton modifier, tu enlèves cet attribut aux champs de la ligne afin qu'ils deviennent modifiables.

Réponse 2 / 5

Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 5
30 mars 2009 à 08:38

Alors voilà une partie de la solution : (merci à totoAussi)

<html>
<head>
</head>
<body>
<form name='form'>
<table border='1px'>
<tr><td>id</td><td>Nom</td><td>Prénom</td><td>Age</td><td>Action</td></tr>
<tr><td><span id='idSpanId1'>1</span></td><td><span id='idSpanNom1'>Durand</span></td><td><span id='idSpanPrenom1'>Leon</span></td><td><span id='idSpanAge1'>17</span></td><td><span id='idSpanBouton1'><input type='button' id='idBouton1' value='Modifier' onClick='modifier(id);'></span></td></tr>
<tr><td><span id='idSpanId2'>2</span></td><td><span id='idSpanNom2'>Duren</span></td><td><span id='idSpanPrenom2'>Jules</span></td><td><span id='idSpanAge2'>15</span></td><td><span id='idSpanBouton2'><input type='button' id='idBouton2' value='Modifier' onClick='modifier(id);'></span></td></tr>
<tr><td><span id='idSpanId3'>3</span></td><td><span id='idSpanNom3'>Dupond</span></td><td><span id='idSpanPrenom3'>Phil</span></td><td><span id='idSpanAge3'>19</span></td><td><span id='idSpanBouton3'><input type='button' id='idBouton3' value='Modifier' onClick='modifier(id);'></span></td></tr>
</table>
</form>
<script language='javascript'>
function modifier(id)
{objButton=document.getElementById(id);
idNameAndNumber=objButton.id;
model=/\d/;
indexNumero=idNameAndNumber.search(model);
idName=idNameAndNumber.substr(0,indexNumero);
numero=idNameAndNumber.replace(idName,"");
objSpanId=document.getElementById("idSpanId"+numero);
objSpanNom=document.getElementById("idSpanNom"+numero);
objSpanPrenom=document.getElementById("idSpanPrenom"+numero);
objSpanAge=document.getElementById("idSpanAge"+numero);
valeurSpanId=objSpanId.firstChild.nodeValue;
valeurSpanNom=objSpanNom.firstChild.nodeValue;
valeurSpanPrenom=objSpanPrenom.firstChild.nodeValue;
valeurSpanAge=objSpanAge.firstChild.nodeValue;
objSpanId.innerHTML="<input type='text' id='nameId"+numero+"' value=\""+valeurSpanId+"\">";
objSpanNom.innerHTML="<input type='text' id='nameNom"+numero+"' value=\""+valeurSpanNom+"\">";
objSpanPrenom.innerHTML="<input type='text' id='namePrenom"+numero+"' value=\""+valeurSpanPrenom+"\">";
objSpanAge.innerHTML="<input type='text' id='nameAge"+numero+"' value=\""+valeurSpanAge+"\">";
objSpanBoutton=document.getElementById("idSpanBouton"+numero);
objSpanBoutton.innerHTML="<input type='button' id='idBouton"+numero+"' value='Valider' onClick='valider(id);'>";
}
function valider(id)
{objButton=document.getElementById(id);
idNameAndNumber=objButton.id;
model=/\d/;
indexNumero=idNameAndNumber.search(model);
idName=idNameAndNumber.substr(0,indexNumero);
numero=idNameAndNumber.replace(idName,"");
objSpanId=document.getElementById("idSpanId"+numero);
objSpanNom=document.getElementById("idSpanNom"+numero);
objSpanPrenom=document.getElementById("idSpanPrenom"+numero);
objSpanAge=document.getElementById("idSpanAge"+numero);
objSpanId.innerHTML=document.getElementById("nameId"+numero).value;
objSpanNom.innerHTML=document.getElementById("nameNom"+numero).value;
objSpanPrenom.innerHTML=document.getElementById("namePrenom"+numero).value;
objSpanAge.innerHTML=document.getElementById("nameAge"+numero).value;
objSpanBoutton=document.getElementById("idSpanBouton"+numero);
objSpanBoutton.innerHTML="<input type='button' id='idBouton"+numero+"' value='Modifier' onClick='modifier(id);'>";
}
</script>
</body>
</html>

Réponse 3 / 5

Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 5
30 mars 2009 à 14:09

Par contre comment je peux faire pour que les valeurs que tu modifie soit modifié en base (via un update) (car les infos affichés viennent du base).

J'ai fais mon foreach :

$i = 0;
foreach($aResult as $aRow)
{
$i == $i++;
echo "<tr align='center'>";
echo "<td><span id='idSpanId".$i."'> ".$aRow['id_host']." </span></td>";
echo "<td><a href='/'><span id='idSpanName".$i."'>".$aRow['name_host']."</span></a></td>";
echo "<td><span id='idSpanIP".$i."'> ".$aRow['ip_host']." </span></td>";
echo "<td><span id='idSpanlogin".$i."'> ".$aRow['login_host']." </span></td>";
echo "<td><span id='idSpanpass".$i."'> ".$aRow['pass_host']." </span></td>";
echo "<td><span id='idSpanpass_root".$i."'> ".$aRow['pass_root_host']." </span></td>";
echo "<td><span id='idSpanBouton".$i."'>
<input type='button' id='idBouton".$i."' value='Modifier' onClick='modifier(id);'>
</span></td>";
echo "</tr>";
}

J'espère que vous avez compris :-)

Merci de votre aide.

Cordialement,

Réponse 4 / 5

Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 5
1 avril 2009 à 13:50

Personne n'aurais une idée ?

Je voudrais juste que quand je clique sur la fonction valider et bien ça update les infos saisie dans la bdd.

Merci de votre aide.

Cordialement,

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Maillon Messages postés 156 Date d'inscription mardi 4 octobre 2005 Statut Membre Dernière intervention 15 avril 2011 5
2 avril 2009 à 12:03

Bon en fait j'ai fini par trouver : j'ai mis mon foreach dans form et après j'envoie mes infos au php. Et dans ma fonction modifier j'ai mis un submit pour le bouton valider et j'ai supprimer la fonction valider.

Voilà c'est résolu.

Merci encore pour vos idées et votre aide.

Cordialement,

Discussions similaires

Logiciel équivalent à Crystal Disk Info pour Mac.

Contacter le "bon coin"